/* NovusElement — Color tokens
   Single-accent system: one Action Blue carries every interactive element.
   Surfaces alternate light/parchment <-> near-black; the color change is the divider. */

:root {
  /* ---- Brand & Accent ---- */
  --color-primary: #0066cc;          /* Action Blue — all links, all blue pill CTAs, focus root */
  --color-primary-focus: #0071e3;    /* Focus Blue — keyboard focus ring on buttons */
  --color-primary-on-dark: #2997ff;  /* Sky Link Blue — in-copy links on dark surfaces */
  --color-on-primary: #ffffff;       /* text on Action Blue fills */

  /* ---- Surface ---- */
  --color-canvas: #ffffff;                  /* Pure White — dominant canvas */
  --color-canvas-parchment: #f5f5f7;        /* Parchment — alternating light tiles, footer */
  --color-surface-pearl: #fafafc;           /* Pearl — ghost/secondary button fill */
  --color-surface-tile-1: #272729;          /* Near-Black Tile 1 — primary dark tile */
  --color-surface-tile-2: #2a2a2c;          /* Near-Black Tile 2 — micro-step lighter */
  --color-surface-tile-3: #252527;          /* Near-Black Tile 3 — micro-step darker */
  --color-surface-black: #000000;           /* Pure Black — global nav, video voids */
  --color-surface-chip-translucent: #d2d2d7;            /* base hex for translucent chip */
  --color-surface-chip-translucent-64: rgba(210, 210, 215, 0.64); /* applied alpha */

  /* ---- Text ---- */
  --color-ink: #1d1d1f;            /* Near-Black Ink — headlines, body, dark utility fill */
  --color-body: #1d1d1f;           /* Body — same near-black tone */
  --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 surface */
  --color-ink-muted-48: #7a7a7a;   /* disabled text, legal fine-print */
  --color-on-dark: #ffffff;        /* alias used by nav / dark utilities */

  /* ---- Hairlines & Borders ---- */
  --color-divider-soft: #f0f0f0;          /* soft ring on secondary buttons */
  --color-divider-soft-alpha: rgba(0, 0, 0, 0.04);
  --color-hairline: #e0e0e0;              /* 1px hairline on store/utility cards */
  --color-border-input: rgba(0, 0, 0, 0.08); /* search input + soft card borders */
}