/*
 * Leviathan brand tokens: the "abyssal" palette.
 *
 * Raw colours are --lv-*; Proteus family greens are --pt-*.
 * Build UI from the semantic --lv-ui-* tokens, which flip for
 * [data-theme="light"]. Dark is the default: Leviathan lives in the deep.
 * Contrast figures (WCAG 2.x) are in brand/palette.md.
 */

:root {
  /* Depth ramp: cold, blue-black neutrals, deepest first. */
  --lv-void: #04070b;    /* page base, the bottom of the trench */
  --lv-abyss: #070d14;   /* app background */
  --lv-trench: #0b1622;  /* sunken panels, inputs, code */
  --lv-hull: #13202e;    /* cards, raised surfaces */
  --lv-plate: #1a2a3b;   /* hover on hull, selected rows */
  --lv-steel: #223548;   /* hairlines, dividers */
  --lv-rivet: #3a536b;   /* strong borders, disabled icons */
  --lv-brine: #8499ad;   /* muted text: 5.6:1 on hull */
  --lv-mist: #aebdcb;    /* secondary text */
  --lv-bone: #e7edf3;    /* primary text, light marks */
  --lv-pearl: #f3f6f9;   /* light-theme page */

  /* Bioluminescence: the brand light. Lume is the eye, links, focus. */
  --lv-lume: #18e0ff;
  --lv-lume-hi: #9af4ff;   /* specular highlight, the glint in the eye */
  --lv-lume-mid: #0bb4dc;  /* gradients, pressed states */
  --lv-lume-deep: #06587a; /* glow floor, tinted fills */
  --lv-lume-ink: #006d8f;  /* lume as text on light: 5.9:1 on white */
  --lv-lume-on-light: #0790b8; /* the mark's light on pale grounds (graphics only): 3.4:1 on pearl */

  /* Tide: abyssal teal. Healthy, resolved, "fixed by Leviathan". */
  --lv-tide: #00f0c8;
  --lv-tide-deep: #00624f;
  --lv-tide-ink: #007a64;

  /* Signals. Blood is reserved for incidents; never decorative. */
  --lv-blood: #ff2a4f;       /* alert fills, the incident dot, glows */
  --lv-blood-text: #ff4d6a;  /* blood as text on dark: >= 5.1:1 on hull */
  --lv-blood-deep: #5c0b1d;
  --lv-blood-ink: #c8102e;   /* blood as text on light */
  --lv-amber: #ffb020;
  --lv-amber-deep: #5a3a00;
  --lv-amber-ink: #8a5a00;

  /* Proteus, the sibling. Use only where both products appear together. */
  --pt-green: #01ad68;
  --pt-green-hi: #1fd386;
  --pt-green-lume: #3df5a0;
  --pt-green-mid: #0b8a52;
  --pt-green-deep: #006b3f;
  --pt-forest: #064e3b;
  --pt-night: #071e17;
  --pt-ink: #007a4e;

  /* Gradients and light. */
  --lv-grad-depth: radial-gradient(120% 90% at 50% 0%, #0d2233 0%, var(--lv-abyss) 55%, var(--lv-void) 100%);
  --lv-grad-lume: linear-gradient(180deg, var(--lv-lume-hi) 0%, var(--lv-lume) 45%, var(--lv-lume-mid) 100%);
  --lv-grad-steel: linear-gradient(180deg, #f3f7fb 0%, #c9d5e1 52%, #8ea3b8 100%);
  --lv-glow-lume: 0 0 0 1px rgb(24 224 255 / 0.35), 0 0 24px rgb(24 224 255 / 0.28);
  --lv-glow-blood: 0 0 0 1px rgb(255 42 79 / 0.45), 0 0 24px rgb(255 42 79 / 0.30);
  --lv-shadow-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 8px 24px rgb(0 0 0 / 0.45);
  --lv-shadow-2: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 24px 64px rgb(0 0 0 / 0.6);

  /* Shape. The brand is cut, not rounded: keep radii small. */
  --lv-radius-0: 0;
  --lv-radius-1: 2px;
  --lv-radius-2: 4px;
  --lv-radius-3: 8px;
  --lv-chamfer: 10px; /* for clip-path corner cuts on hero panels */

  /* Type. Wordmarks are outlined SVG; these stacks are for UI text only. */
  --lv-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --lv-font-display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --lv-font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --lv-tracking-caps: 0.18em;  /* display labels, echoes the wide wordmarks */
  --lv-tracking-label: 0.12em; /* 11 px mono labels and table headers */

  /* Motion. Things surface slowly and strike fast. */
  --lv-ease-surface: cubic-bezier(0.16, 1, 0.3, 1);
  --lv-ease-strike: cubic-bezier(0.7, 0, 0.84, 0);
  --lv-dur-fast: 120ms;
  --lv-dur-base: 220ms;
  --lv-dur-slow: 480ms;

  /* Semantic UI tokens, dark (default). */
  color-scheme: dark;
  --lv-ui-bg: var(--lv-abyss);
  --lv-ui-bg-deep: var(--lv-void);
  --lv-ui-surface: var(--lv-hull);
  --lv-ui-panel: var(--lv-trench); /* dense app panels; hull is for raised things on them */
  --lv-ui-surface-sunken: var(--lv-trench);
  --lv-ui-surface-hover: var(--lv-plate);
  --lv-ui-border: var(--lv-steel);
  --lv-ui-border-strong: var(--lv-rivet);
  --lv-ui-text: var(--lv-bone);
  --lv-ui-text-2: var(--lv-mist);
  --lv-ui-text-muted: var(--lv-brine);
  --lv-ui-accent: var(--lv-lume);
  --lv-ui-on-accent: var(--lv-void);
  --lv-ui-focus: var(--lv-lume);
  --lv-ui-success: var(--lv-tide);
  --lv-ui-warning: var(--lv-amber);
  --lv-ui-danger: var(--lv-blood);
  --lv-ui-danger-text: var(--lv-blood-text);
  --lv-ui-danger-bg: rgb(255 42 79 / 0.12);
  --lv-ui-warning-bg: rgb(255 176 32 / 0.12);
  --lv-ui-success-bg: rgb(0 240 200 / 0.10);
  --lv-ui-accent-bg: rgb(24 224 255 / 0.10);
}

[data-theme="light"] {
  color-scheme: light;
  --lv-ui-bg: var(--lv-pearl);
  --lv-ui-bg-deep: #e7edf3;
  --lv-ui-surface: #ffffff;
  --lv-ui-panel: #ffffff;
  --lv-ui-surface-sunken: #eef2f6;
  --lv-ui-surface-hover: #e4ebf2;
  --lv-ui-border: #d3dde6;
  --lv-ui-border-strong: #9fb0c0;
  --lv-ui-text: var(--lv-trench);
  --lv-ui-text-2: #33485c;
  --lv-ui-text-muted: #4a5f73;
  --lv-ui-accent: var(--lv-lume-ink);
  --lv-ui-on-accent: #ffffff;
  --lv-ui-focus: var(--lv-lume-ink);
  --lv-ui-success: var(--lv-tide-ink);
  --lv-ui-warning: var(--lv-amber-ink);
  --lv-ui-danger: var(--lv-blood-ink);
  --lv-ui-danger-text: var(--lv-blood-ink);
  --lv-ui-danger-bg: rgb(200 16 46 / 0.08);
  --lv-ui-warning-bg: rgb(138 90 0 / 0.08);
  --lv-ui-success-bg: rgb(0 122 100 / 0.08);
  --lv-ui-accent-bg: rgb(0 109 143 / 0.08);
}