/* ============================================================
   COLORS — a single quiet blue accent over light & dark canvases.
   The whole system is monochrome surfaces + ONE interactive blue.
   ============================================================ */
:root {
  /* — Brand / accent (the only interactive color) — */
  --blue-action: #0066cc;      /* every link, every pill CTA, the click signal */
  --blue-focus: #0071e3;       /* keyboard focus ring (slightly brighter) */
  --blue-on-dark: #2997ff;     /* in-copy links on dark tiles only */

  /* — Ink / text on light — */
  --ink: #1d1d1f;              /* headlines + body (near-black, not pure) */
  --ink-80: #333333;           /* body on pearl button surface */
  --ink-48: #7a7a7a;           /* disabled text, legal fine print */

  /* — Text on dark — */
  --on-dark: #ffffff;          /* all text on dark tiles + nav */
  --on-dark-muted: #cccccc;    /* secondary copy on dark tiles */

  /* — Surfaces, light — */
  --canvas: #ffffff;           /* dominant white canvas */
  --parchment: #f5f5f7;        /* signature off-white; alt tiles + footer */
  --pearl: #fafafc;            /* ghost-button fill, reads against parchment */

  /* — Surfaces, dark (micro-stepped near-blacks) — */
  --tile-dark-1: #272729;      /* primary dark tile */
  --tile-dark-2: #2a2a2c;      /* a hair lighter — stacked separation */
  --tile-dark-3: #252527;      /* a hair darker — bottom of stack, video */
  --void: #000000;             /* true black — nav bar, video bg, overlays */

  /* — Chrome details — */
  --chip-translucent: rgba(210, 210, 215, 0.64); /* circular control over photo */
  --divider-soft: rgba(0, 0, 0, 0.04);  /* ghost-button ring (not a hard line) */
  --hairline: #e0e0e0;          /* 1px border on utility cards + chips */
  --hairline-soft: rgba(0, 0, 0, 0.08); /* search input + frosted separators */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the raw hex.
     ============================================================ */
  --accent: var(--blue-action);
  --accent-focus: var(--blue-focus);
  --accent-on-dark: var(--blue-on-dark);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-80);
  --text-muted: var(--ink-48);
  --text-on-dark: var(--on-dark);
  --text-on-dark-muted: var(--on-dark-muted);

  --surface-page: var(--canvas);
  --surface-alt: var(--parchment);
  --surface-ghost: var(--pearl);
  --surface-dark: var(--tile-dark-1);
  --surface-nav: var(--void);

  --on-accent: #ffffff;
  --border-card: var(--hairline);
  --border-input: var(--hairline-soft);
}