/*
 * Colenxt — layer 1: the palette, as ramps, mapped onto the core's tokens.
 *
 * SAFE ACROSS CORE UPGRADES. Everything here redefines a custom property the
 * core's token contract lists (`packages/ui/README.md`, shipped inside the
 * `@core/ui` package). Nothing here names a component class. If a core
 * release renames a class, this file still does exactly what it says.
 *
 * The ramps are ours (`--c-*`); the core never sees them. They come from
 * colenxt.com: green-blacks (#0e0e0e, #161d15, #1e2b1a), the #444444 grey,
 * white, and one lime. Every colour below is one of those families.
 *
 * `--accent` and `--series-solo` are deliberately absent: they come from
 * `client-config.json`, which the dashboard applies as a rule of its own that
 * this file would only lose an argument with. So are the chart series: their
 * order is the colour-vision safety mechanism, and the core's blue already
 * stands apart from a lime single line.
 */

:root {
  /* Green-black — the site's grounds, two steps of them verbatim. */
  --c-green-1000: #0b0e0a;
  --c-green-950: #10150f;
  --c-green-900: #161d15;
  --c-green-850: #1e2b1a;
  --c-green-700: #2c3a28;

  /* Mist — the dark theme's inks, white cooled towards the green so the
     words sit on the ground rather than float over it. */
  --c-mist-50: #f2f5ee;
  --c-mist-300: #b9c2b1;
  --c-mist-500: #8e9887;

  /* Paper — the light theme's grounds and inks, the same green taken up. */
  --c-paper-100: #f3f5f0;
  --c-paper-200: #eaeee5;
  --c-paper-300: #e1e6da;
  --c-paper-500: #c3ccb9;
  --c-paper-700: #5e6658;
  --c-grey: #444444;
  --c-ink: #0e0e0e;

  /* Lime — the accent the config carries, per theme. Here only for the tints
     the chrome is drawn in. */
  --c-lime-400: #8fbf00;
  --c-lime-600: #5f7f00;

  /* --- the core's contract, painted from the ramps ------------------- */

  /* Ground: page, card, inset, floating. */
  --bg: var(--c-green-1000);
  --surface: var(--c-green-950);
  --surface-2: var(--c-green-900);
  --surface-3: var(--c-green-850);

  /* Ink: 17.6:1, 10.6:1 and 6.5:1 on the page. */
  --text: var(--c-mist-50);
  --text-2: var(--c-mist-300);
  --muted: var(--c-mist-500);

  /* Edges. Hairlines in the site's own green-black; a hovered row and every
     floating layer's ring take the lime, faintly. */
  --line: var(--c-green-850);
  --axis: var(--c-green-700);
  --border: color-mix(in srgb, var(--c-mist-50) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--c-mist-50) 16%, transparent);
  --hover: color-mix(in srgb, var(--c-lime-400) 6%, transparent);

  --glass-border: color-mix(in srgb, var(--c-lime-400) 18%, transparent);
  --glass-lens: color-mix(in srgb, var(--c-lime-400) 16%, transparent);

  /* Dark ink on lime: 8.8:1. */
  --on-accent: var(--c-ink);
}

/* Light is a selected sibling with the same roles, never an inversion: a
   viewer who switches without this gets the core's palette back. White on
   the light accent is the core's own `--on-accent`, already right. */
:root[data-theme="light"] {
  --bg: var(--c-paper-100);
  --surface: #ffffff;
  --surface-2: var(--c-paper-200);
  --surface-3: #ffffff;

  /* Ink: 17.6:1, 8.9:1 and 5.4:1 on the page. */
  --text: var(--c-ink);
  --text-2: var(--c-grey);
  --muted: var(--c-paper-700);

  --line: var(--c-paper-300);
  --axis: var(--c-paper-500);
  --border: color-mix(in srgb, var(--c-green-900) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--c-green-900) 18%, transparent);
  --hover: color-mix(in srgb, var(--c-lime-600) 6%, transparent);

  --glass-border: color-mix(in srgb, var(--c-lime-600) 18%, transparent);
}