/*
 * Hostile — 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 (`--h-*`); the core never sees them. They exist so that
 * every colour in the deployment comes from five families and not from
 * fifty one-off hex values: black, gray, white, light blue, lilac.
 *
 * `--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.
 */

:root {
  /* Lilac — the energy. 400 is the accent the config carries; the rest are
     for the chrome layer's gradients and glows. */
  --h-lilac-100: #e5dcff;
  --h-lilac-200: #cfc0fb;
  --h-lilac-300: #b9a3f5;
  --h-lilac-400: #a892ef;
  --h-lilac-500: #8f74e6;
  --h-lilac-600: #7856d6;
  --h-lilac-700: #6d4fc4;
  --h-lilac-800: #4e357f;
  --h-lilac-900: #2c1d4d;

  /* Light blue — the cold second. Where lilac says "this deployment",
     blue says "this measurement". */
  --h-blue-200: #b8e4fb;
  --h-blue-300: #9ad6f7;
  --h-blue-400: #7fc6f2;
  --h-blue-500: #56aee0;
  --h-blue-600: #3691c6;
  --h-blue-700: #1f7fb8;

  /* Ink — black to white through a gray that is cooled towards the lilac,
     so nothing in the interface is a neutral that fights the brand. */
  --h-ink-1000: #05050a;
  --h-ink-950: #0a0912;
  --h-ink-900: #0f0d18;
  --h-ink-850: #14121f;
  --h-ink-800: #1a1728;
  --h-ink-700: #241f36;
  --h-ink-600: #322b48;
  --h-ink-500: #4a4260;
  --h-ink-400: #6b6280;
  --h-ink-300: #8f87a3;
  --h-ink-200: #b8b2c6;
  --h-ink-100: #ddd9e6;
  --h-ink-0: #ffffff;

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

  /* Ground: page, card, inset, floating. */
  --bg: var(--h-ink-1000);
  --surface: var(--h-ink-900);
  --surface-2: var(--h-ink-800);
  --surface-3: var(--h-ink-700);

  /* Ink: 17:1, 8:1 and 5:1 on the page. */
  --text: #f7f6fb;
  --text-2: var(--h-ink-200);
  --muted: var(--h-ink-300);

  /* Edges. The lilac lives here, which is how it reaches every card ring,
     every hairline and every hovered row instead of one button. */
  --line: var(--h-ink-800);
  --axis: var(--h-ink-600);
  --border: rgba(168, 146, 239, 0.16);
  --border-strong: rgba(168, 146, 239, 0.34);
  --hover: rgba(168, 146, 239, 0.09);

  /* Depth. The ring stays 1px and never becomes a border; a floating layer
     casts violet rather than black. */
  --shadow-1: 0 0 0 1px var(--border);
  --shadow-2: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-pop:
    0 0 0 1px var(--border), 0 18px 40px -14px rgba(30, 12, 70, 0.9);

  /* Glass (core 0.8.0). Every floating layer -- top bar, dock, palette, a
     list of options, the drawer, the sign-in card -- takes its fill, blur,
     ring, top light and lens from these five. Thinner than the core's, so
     the aurora reads through; the ring and the lens carry the lilac. */
  --glass-bg: color-mix(in srgb, var(--surface) 58%, transparent);
  --glass-blur: 20px;
  --glass-border: rgba(168, 146, 239, 0.22);
  --glass-highlight: rgba(233, 224, 255, 0.1);
  --glass-lens: rgba(168, 146, 239, 0.16);
  --glass-shadow: 0 18px 40px -14px rgba(30, 12, 70, 0.9);

  /* Shape. Tighter than the core's 6/8/12/16: this roster is techno and
     drum & bass, and a soft corner reads as a consumer app. */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 9px;
  --radius-xl: 13px;

  /* Charts. Light blue leads a comparison; a single line takes the accent
     from the config. Series 2 to 8 are the core's, untouched: their order is
     the colour-vision safety mechanism and no brand is worth breaking it. */
  --series-1: var(--h-blue-400);
  --area-alpha: 0.34;
  --spark-alpha: 0.15;

  /* Motion, by role: an arrival, and an answer to the pointer. Quicker than
     the core's 320/120 — these screens are dense, and a slow entrance on a
     dense screen reads as a slow product. */
  --motion: 280ms;
  --motion-fast: 110ms;
  --ease: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* 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: #f6f4fb;
  --surface: var(--h-ink-0);
  --surface-2: #edeaf6;
  --surface-3: var(--h-ink-0);

  --text: #100e18;
  --text-2: #4a4560;
  --muted: #625d78;

  --line: #e6e1f2;
  --axis: #bdb5d2;
  --border: rgba(109, 79, 196, 0.16);
  --border-strong: rgba(109, 79, 196, 0.32);
  --hover: rgba(109, 79, 196, 0.06);

  --shadow-1: 0 0 0 1px var(--border);
  --shadow-2: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(30, 12, 70, 0.08);
  --shadow-pop:
    0 0 0 1px var(--border), 0 18px 40px -16px rgba(30, 12, 70, 0.28);

  --glass-bg: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-border: rgba(109, 79, 196, 0.18);
  --glass-highlight: rgba(255, 255, 255, 0.85);
  --glass-lens: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 18px 40px -16px rgba(30, 12, 70, 0.28);

  /* The dark theme's blue is a 3:1 line on white; this one is 4.4:1. */
  --series-1: var(--h-blue-700);
}