/* =============================================================
   CTH — Color tokens
   A pure greyscale system: ink on cloud, cloud on ink. No color
   accents. Depth comes from elevation and hairline borders, never
   from tint. Warm-neutral greys give the system an editorial,
   premium-restraint feel.
   ============================================================= */

:root {
  /* --- Base greyscale ramp (pure neutral: black, white, grey only) --- */
  --cth-ink: #1a1a1a;          /* primary text, headlines, CTA fill, active states */
  --cth-ink-hover: #2e2e2e;    /* primary CTA hover */
  --cth-graphite: #3a3a3a;     /* strong secondary text on cloud */
  --cth-mist: #626262;         /* secondary text, muted icons, serif accent */
  --cth-soft: #969696;         /* placeholders, tertiary labels, disabled */
  --cth-edge: #e3e3e3;         /* the one border tone — hairline on every surface */
  --cth-edge-soft: #ededed;    /* faint internal dividers */
  --cth-sunken: #f2f2f2;       /* recessed fills, nav-active, sunken tiles */
  --cth-page: #f6f6f6;         /* neutral off-white page background */
  --cth-cloud: #ffffff;        /* the single surface color */

  /* --- Semantic surfaces --- */
  --surface-page: var(--cth-page);
  --surface-card: var(--cth-cloud);
  --surface-sunken: var(--cth-sunken);
  --surface-ink: var(--cth-ink);

  /* --- Semantic text --- */
  --text-strong: var(--cth-ink);
  --text-secondary: var(--cth-graphite);
  --text-muted: var(--cth-mist);
  --text-soft: var(--cth-soft);
  --text-on-ink: var(--cth-cloud);
  --text-accent: var(--cth-mist);   /* the italic serif accent color */

  /* --- Borders --- */
  --border-color: var(--cth-edge);
  --border-color-soft: var(--cth-edge-soft);
  --border-hairline: 1px solid var(--cth-edge);
  --border-soft: 1px solid var(--cth-edge-soft);

  /* --- Focus --- */
  --focus-ink: rgba(26, 26, 26, 0.32);
  --focus-ring: 0 0 0 3px rgba(26, 26, 26, 0.16);

  /* --- Data / chart greyscale ramp (bars, deltas) --- */
  --data-1: #1a1a1a;   /* strongest series */
  --data-2: #626262;
  --data-3: #969696;
  --data-4: #cfcfcf;   /* faintest / projected */
  --data-track: #ececec;
}