/* ============================================================
   COLORS — Gallery Design System
   A single interactive accent (Action Blue). Surfaces alternate
   light <-> near-black. No decorative gradients exist.
   ============================================================ */

:root {
  /* --- Brand & Accent --------------------------------------- */
  --color-primary: #0066cc;          /* Action Blue — the only interactive color */
  --color-primary-focus: #0071e3;    /* brighter sibling, focus ring only */
  --color-primary-on-dark: #2997ff;  /* Sky Link Blue — links on dark tiles */

  /* --- Text ------------------------------------------------- */
  --color-ink: #1d1d1f;              /* near-black — all headlines & body on light */
  --color-body: #1d1d1f;
  --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 */
  --color-on-primary: #ffffff;       /* text on Action Blue */
  --color-on-dark: #ffffff;

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

  /* --- Hairlines & Borders ---------------------------------- */
  --color-divider-soft: #f0f0f0;     /* soft ring on secondary buttons */
  --color-hairline: #e0e0e0;         /* 1px border on cards & chips */
  --color-border-faint: rgba(0, 0, 0, 0.08); /* input / sub-nav separator */
  --color-border-ghost: rgba(0, 0, 0, 0.04); /* secondary-button ring */

  /* --- Semantic aliases ------------------------------------- */
  --surface-page: var(--color-canvas);
  --surface-alt: var(--color-canvas-parchment);
  --surface-dark: var(--color-surface-tile-1);
  --surface-nav: var(--color-surface-black);
  --text-default: var(--color-ink);
  --text-on-dark: var(--color-body-on-dark);
  --text-muted: var(--color-ink-muted-48);
  --link: var(--color-primary);
  --link-on-dark: var(--color-primary-on-dark);
  --focus-ring: var(--color-primary-focus);
}