/* ============================================================
   COLORS — single blue accent, light/dark surface modes
   Base hexes first, then semantic aliases.
   ============================================================ */
:root {
  /* --- Brand / Accent (the single interactive color) --- */
  --blue-action: #0066cc;        /* primary: links, pill CTAs, focus root */
  --blue-focus: #0071e3;         /* keyboard focus ring */
  --blue-sky: #2997ff;           /* on-dark inline links */

  /* --- Surfaces --- */
  --white: #ffffff;              /* dominant canvas */
  --parchment: #f5f5f7;          /* signature off-white */
  --pearl: #fafafc;              /* ghost-button fill */
  --tile-1: #272729;             /* primary dark tile */
  --tile-2: #2a2a2c;             /* micro-step lighter */
  --tile-3: #252527;             /* micro-step darker */
  --black: #000000;              /* nav bar, video void */
  --chip-translucent: #d2d2d7;   /* base of translucent control chip */

  /* --- Text --- */
  --ink: #1d1d1f;                /* headlines + body on light */
  --ink-muted-80: #333333;       /* body on pearl surface */
  --ink-muted-48: #7a7a7a;       /* disabled text, fine print */
  --on-dark: #ffffff;            /* text on dark tiles + nav */
  --on-dark-muted: #cccccc;      /* secondary copy on dark */

  /* --- Hairlines --- */
  --divider-soft: #f0f0f0;       /* soft ring on ghost buttons */
  --hairline: #e0e0e0;           /* 1px card / chip border */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */
  --color-primary: var(--blue-action);
  --color-primary-focus: var(--blue-focus);
  --color-primary-on-dark: var(--blue-sky);

  --color-canvas: var(--white);
  --color-canvas-parchment: var(--parchment);
  --color-surface-pearl: var(--pearl);
  --color-surface-tile-1: var(--tile-1);
  --color-surface-tile-2: var(--tile-2);
  --color-surface-tile-3: var(--tile-3);
  --color-surface-black: var(--black);

  --color-ink: var(--ink);
  --color-body: var(--ink);
  --color-body-muted: var(--on-dark-muted);
  --color-body-on-dark: var(--on-dark);
  --color-ink-muted-80: var(--ink-muted-80);
  --color-ink-muted-48: var(--ink-muted-48);

  --color-on-primary: var(--white);
  --color-on-dark: var(--on-dark);

  --color-divider-soft: var(--divider-soft);
  --color-hairline: var(--hairline);

  /* Translucent recipes used in production */
  --chip-fill: rgba(210, 210, 215, 0.64);
  --frosted-fill: rgba(245, 245, 247, 0.8);
  --border-soft: rgba(0, 0, 0, 0.04);
  --border-card: rgba(0, 0, 0, 0.08);
}