/*
 * Crazy Tower — 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 the
 * label's logo, which is white chalk on black and nothing else: so the
 * dashboard is black and white too, a neutral grey ramp between them, no hue.
 *
 * `--accent` and `--series-solo` are deliberately absent: they come from
 * `client-config.json` (white on dark, near-black on light), 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 a white single line already stands apart from them.
 */

:root {
  /* Black — the logo's ground, and three steps up from it. */
  --c-black-1000: #000000;
  --c-black-950: #0b0b0b;
  --c-black-900: #141414;
  --c-black-850: #1c1c1c;
  --c-black-700: #2e2e2e;

  /* Chalk — the logo's white, and two greys under it for the dark theme. */
  --c-chalk-50: #f5f5f5;
  --c-chalk-300: #bdbdbd;
  --c-chalk-500: #8f8f8f;

  /* Paper — the light theme's grounds and inks. */
  --c-paper-100: #f4f4f4;
  --c-paper-200: #ebebeb;
  --c-paper-300: #e0e0e0;
  --c-paper-500: #c4c4c4;
  --c-paper-700: #646464;
  --c-grey: #3d3d3d;
  --c-ink: #0a0a0a;

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

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

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

  /* Edges: hairlines one step up from the ground; the rings in chalk. */
  --line: var(--c-black-850);
  --axis: var(--c-black-700);
  --border: color-mix(in srgb, var(--c-chalk-50) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--c-chalk-50) 16%, transparent);
  --hover: color-mix(in srgb, var(--c-chalk-50) 5%, transparent);

  --glass-border: color-mix(in srgb, var(--c-chalk-50) 14%, transparent);
  --glass-lens: color-mix(in srgb, var(--c-chalk-50) 12%, transparent);

  /* Black on the white accent: 21:1. */
  --on-accent: var(--c-black-1000);
}

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

  /* Ink: 18.0:1, 9.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-ink) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--c-ink) 18%, transparent);
  --hover: color-mix(in srgb, var(--c-ink) 5%, transparent);

  --glass-border: color-mix(in srgb, var(--c-ink) 14%, transparent);

  /* White on the near-black accent: 19.8:1. */
  --on-accent: #ffffff;
}