/* ============================================================
   IUDEX — Color tokens
   ------------------------------------------------------------
   IUDEX is a strictly MONOCHROME brand. There are no chromatic
   accents anywhere in the brand evidence — the entire system is
   built from pure black, pure white and a precise neutral-gray
   ramp. Emphasis is created by VALUE (black vs. light gray),
   never by hue. Treat the gray ramp as the whole palette.
   ============================================================ */

:root {
  /* ---- Base ramp: pure achromatic neutrals ---- */
  --black:        #000000;
  --ink:          #0A0A0A;   /* near-black — primary ink, button fills          */
  --charcoal:     #1C1C1E;   /* soft charcoal — alt dark button / app sidebar   */
  --neutral-900:  #171717;
  --neutral-800:  #262626;
  --neutral-700:  #404040;
  --neutral-600:  #525252;   /* body copy on white                              */
  --neutral-500:  #737373;   /* secondary body / captions                       */
  --neutral-400:  #A3A3A3;   /* muted text, placeholders                        */
  --neutral-350:  #BDBDBD;   /* the "ghost" words in two-tone display headlines */
  --neutral-300:  #D4D4D4;   /* dotted dividers, strong hairlines               */
  --neutral-250:  #DFDFDF;
  --neutral-200:  #E5E5E5;   /* default borders                                 */
  --neutral-150:  #EDEDED;
  --neutral-100:  #F5F5F5;   /* alternate surface / fills                       */
  --neutral-50:   #FAFAFA;   /* faint section background                        */
  --white:        #FFFFFF;

  /* ---- Semantic surfaces ---- */
  --surface-page:       var(--white);
  --surface-raised:     var(--white);
  --surface-sunken:     var(--neutral-50);
  --surface-alt:        var(--neutral-100);
  --surface-inverse:    var(--ink);     /* dark sections / footers              */
  --surface-app-rail:   #FBFBFB;        /* product left rail                     */

  /* ---- Semantic text ---- */
  --text-strong:    var(--ink);         /* headline emphasis, the "loud" words   */
  --text-primary:   var(--neutral-900); /* default heading / strong UI text      */
  --text-body:      var(--neutral-600); /* paragraph copy                        */
  --text-secondary: var(--neutral-500);
  --text-muted:     var(--neutral-400); /* captions, meta, placeholders          */
  --text-ghost:     var(--neutral-350); /* the light-gray words in headlines     */
  --text-on-inverse:    var(--white);
  --text-on-inverse-dim:#A1A1A1;

  /* ---- Borders & dividers ---- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--ink);
  --divider-dotted: var(--neutral-300);
  --divider-line:   var(--neutral-200);

  /* ---- Controls ---- */
  --control-fill:        var(--ink);    /* primary button                        */
  --control-fill-hover:  #000000;
  --control-fill-charcoal:var(--charcoal);
  --control-fg:          var(--white);
  --control-outline-bg:  var(--white);
  --control-outline-border: var(--neutral-300);
  --control-ghost-fill:  var(--neutral-100);

  /* ---- Focus ---- */
  --focus-ring: rgba(10, 10, 10, 0.35);

  /* ---- Functional status (intentionally muted — IUDEX has no
          brand chroma; use only where UI semantics require it,
          e.g. relevance / validation in the product) ---- */
  --status-positive: #1C7D4D;
  --status-warning:  #9A6B16;
  --status-critical: #A02525;
  --status-positive-soft: #EAF3EE;
  --status-critical-soft: #F6EBEB;
}