/* Windex Infotech — Color tokens
 * One brand accent (Action Blue). Surfaces alternate light/parchment/near-black.
 * The color change between tiles IS the section divider — no borders, no gradients.
 */
:root {
  /* ---- Brand & accent (the single interactive color) ---- */
  --color-primary: #0066cc;          /* Action Blue — every link, every pill CTA, focus root */
  --color-primary-focus: #0071e3;    /* Focus ring only (2px outline) */
  --color-primary-on-dark: #2997ff;  /* Sky Link Blue — in-copy links on dark tiles */
  --color-on-primary: #ffffff;       /* Text on Action Blue */

  /* ---- Surfaces ---- */
  --color-canvas: #ffffff;               /* Pure white — dominant canvas */
  --color-canvas-parchment: #f5f5f7;     /* Signature Apple off-white — alt tiles, footer */
  --color-surface-pearl: #fafafc;        /* Ghost-button fill, reads as button on parchment */
  --color-surface-tile-1: #272729;       /* Primary dark tile */
  --color-surface-tile-2: #2a2a2c;       /* Micro-step lighter dark tile */
  --color-surface-tile-3: #252527;       /* Micro-step darker dark tile / player frames */
  --color-surface-black: #000000;        /* True void — global nav, video backgrounds */
  --color-surface-chip-translucent: #d2d2d7; /* Base of translucent control chip */
  --color-chip-translucent-64: rgba(210, 210, 215, 0.64); /* Applied alpha */

  /* ---- Text ---- */
  --color-ink: #1d1d1f;              /* Near-black — headlines, body, dark utility fill */
  --color-body: #1d1d1f;            /* Same tone — one near-black for all light-surface text */
  --color-body-on-dark: #ffffff;    /* Text on dark tiles + global nav */
  --color-body-muted: #cccccc;      /* Secondary copy on dark tiles */
  --color-ink-muted-80: #333333;    /* Body on pearl button surface */
  --color-ink-muted-48: #7a7a7a;    /* Disabled text, legal fine print */

  /* ---- Hairlines & borders ---- */
  --color-divider-soft: #f0f0f0;    /* Soft ring on secondary buttons (~rgba(0,0,0,.04)) */
  --color-hairline: #e0e0e0;        /* 1px hairline on utility cards + configurator chips */
  --color-hairline-alpha: rgba(0, 0, 0, 0.08); /* Card / sub-nav separator */
}