/* =====================================================
   INDROX — COLOR TOKENS
   A near-monochrome carbon palette anchored by a single
   electric "Signal Cyan". The accent never exceeds ~8–12%
   of any surface — restraint is the brand.
   ===================================================== */
:root {
  /* ---- Core palette (base values) ---- */
  --idx-carbon:    #0A0E14;  /* primary background / aerospace black */
  --idx-graphite:  #14181F;  /* surface 01 — cards, panels */
  --idx-steel:     #1F252E;  /* surface 02 — raised / table head */
  --idx-gunmetal:  #2A323D;  /* surface 03 — inputs, hover wells */
  --idx-mist:      #8A95A5;  /* mid text / captions */
  --idx-silver:    #E8ECF1;  /* body text on dark */
  --idx-snow:      #FAFBFC;  /* headings / inverse surface */

  /* ---- Signature accent ---- */
  --idx-cyan:      #00D4FF;  /* Signal Cyan — the brand carrier */
  --idx-cyan-deep: #0099CC;  /* pressed / on-light accent */
  --idx-cyan-glow: rgba(0, 212, 255, 0.18);
  --idx-cyan-soft: rgba(0, 212, 255, 0.07);

  /* ---- Functional / structural ---- */
  --idx-grid:            rgba(255, 255, 255, 0.04);  /* engineering grid lines */
  --idx-hairline:        rgba(255, 255, 255, 0.10);  /* default dividers / borders */
  --idx-hairline-strong: rgba(255, 255, 255, 0.20);  /* emphasised dividers */
  --idx-warm-paper:      #F5F2EC;                     /* uncoated print stock ref */
  --idx-danger:          #FF6464;  /* regulatory ceilings / over-limit markers */

  /* =========================================================
     SEMANTIC ALIASES — reference these in product UI, not raw
     palette values. Defaults map to the dark (primary) theme.
     ========================================================= */
  --surface-base:      var(--idx-carbon);
  --surface-card:      var(--idx-graphite);
  --surface-raised:    var(--idx-steel);
  --surface-well:      var(--idx-gunmetal);
  --surface-inverse:   var(--idx-snow);

  --text-heading:      var(--idx-snow);
  --text-body:         var(--idx-silver);
  --text-muted:        var(--idx-mist);
  --text-on-accent:    var(--idx-carbon);
  --text-on-inverse:   var(--idx-carbon);

  --accent:            var(--idx-cyan);
  --accent-pressed:    var(--idx-cyan-deep);
  --accent-glow:       var(--idx-cyan-glow);
  --accent-soft:       var(--idx-cyan-soft);

  --border-hairline:   var(--idx-hairline);
  --border-strong:     var(--idx-hairline-strong);
  --grid-line:         var(--idx-grid);
  --focus-ring:        var(--idx-cyan);
}

/* =========================================================
   LIGHT THEME — for B2B datasheets, bright-environment
   roll-ups and print. Scope: html[data-theme="light"].
   Only semantic aliases flip; raw palette tokens are stable.
   ========================================================= */
html[data-theme="light"] {
  --surface-base:    #EBEEF2;
  --surface-card:    #FFFFFF;
  --surface-raised:  #F3F5F8;
  --surface-well:    #E2E7ED;
  --surface-inverse: var(--idx-carbon);

  --text-heading:    var(--idx-carbon);
  --text-body:       #1F252E;
  --text-muted:      #5A6573;
  --text-on-accent:  #FFFFFF;
  --text-on-inverse: var(--idx-snow);

  --accent:          #0089B3;
  --accent-pressed:  #006C90;
  --accent-glow:     rgba(0, 137, 179, 0.14);
  --accent-soft:     rgba(0, 137, 179, 0.05);

  --border-hairline: rgba(10, 14, 20, 0.12);
  --border-strong:   rgba(10, 14, 20, 0.24);
  --grid-line:       rgba(10, 14, 20, 0.04);
  --focus-ring:      #0089B3;
}