/* Beekon console — design tokens.
 *
 * The colour/geometry/type system is the beekon brand system, lifted verbatim
 * from the landing + docs sites (beekon-landing/src/styles/global.css). Values
 * are OKLCH by design: the neutrals are NOT grey, they carry chroma 0.008-0.025
 * at hue 60-80, which is what makes the surface read as beekon rather than as a
 * generic dashboard. Do not substitute slate/#fff/#000.
 *
 * Fonts are self-hosted (fonts/*.woff2). The console CSP is `default-src 'self'`
 * with no font-src, so font-src falls back to 'self' and a CDN webfont would be
 * blocked outright — and an authenticated operator console should make zero
 * third-party requests anyway. Licences ship alongside in fonts/.
 */

/* --- Faces. Variable fonts: one file covers the whole weight range. --------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono.woff2") format("woff2");
}

:root {
  /* Surfaces */
  --bg: oklch(98.5% 0.008 80);
  --bg-elev: oklch(99.5% 0.005 80);
  --bg-sunk: oklch(96% 0.012 80);
  --line: oklch(90% 0.012 75);
  --line-strong: oklch(82% 0.018 70);
  /* Loading placeholders (M4-0443): the shimmer's two stops, per theme, so a
     skeleton reads clearly on both surfaces. */
  --skel-a: color-mix(in oklch, var(--ink) 7%, transparent);
  --skel-b: color-mix(in oklch, var(--ink) 13%, transparent);

  /* Ink */
  --ink: oklch(20% 0.015 60);
  --ink-2: oklch(35% 0.015 60);
  --ink-3: oklch(52% 0.02 65);
  /* Placeholders, axis labels, decoration — never the only copy of something a
     person must read. At 54% it still reads at 4.5:1 or better on all three
     surfaces (M4-0407, audit G5-01: was 65%, 2.9–3.2:1). */
  --ink-4: oklch(54% 0.02 70);

  /* Brand */
  --honey: oklch(74% 0.16 65);
  --honey-2: oklch(82% 0.13 75);
  --honey-3: oklch(68% 0.18 50);
  --honey-ink: oklch(45% 0.14 55);

  /* Accent text + solid accent surfaces resolve per theme. Light uses the
     darkened --honey-ink for text (contrast on a near-white bg); dark uses
     --honey directly. Every accent rule reads these, never the raw ramp. */
  --accent-text: var(--honey-ink);
  --accent-solid: var(--ink);
  --accent-solid-ink: var(--bg);

  /* Status (M4-0407, audit G5-02/G5-29; the v3 boards' States values). Each
     tone is a TEXT colour at 4.5:1 or better on every surface and on its own
     -soft tint, which is the background of a pill, chip or error box. --amber
     is for dots, bars and borders (3:1 as a graphic); amber text uses
     --honey-ink, which the dark theme swaps for --honey. */
  --green: oklch(45% 0.12 155);
  --green-soft: oklch(94% 0.04 155);
  --red: oklch(50% 0.18 25);
  --red-soft: oklch(95% 0.03 25);
  --amber: oklch(60% 0.15 75);
  --blue: oklch(47% 0.12 245);
  --blue-soft: oklch(94% 0.03 245);

  /* Geometry */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Type families */
  --f-display: "Geist", -apple-system, system-ui, sans-serif;
  --f-body: "Geist", -apple-system, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — denser than the marketing scale (this is an operator tool),
     but keeping the brand's fractional sizes and its tracking signature:
     negative on display, strongly positive on uppercase mono micro-labels. */
  --t-display: 22px;
  --t-h2: 17px;
  --t-h3: 14.5px;
  --t-body: 14px;
  --t-sm: 13px;
  --t-xs: 12.5px;
  --t-micro: 11.5px;
  --t-eyebrow: 11px; /* the floor for anything a person reads (M4-0407, G5-28) */

  --tr-display: -0.02em;
  --tr-h2: -0.018em;
  --tr-h3: -0.01em;
  --tr-body: -0.005em;
  --tr-eyebrow: 0.12em;

  /* Space — 4px grid, biased to multiples of 8 like the source system */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 10px;
  --s-5: 12px;
  --s-6: 16px;
  --s-7: 20px;
  --s-8: 24px;
  --s-9: 32px;
  --s-10: 48px;

  /* Layout */
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --content-max: 1120px;

  /* Motion */
  --dur-fast: 0.15s;
  --dur: 0.18s;
  --ease: ease;

  /* Focus ring: a gap in the surface colour, then a 2 px ring in the accent ink
     (7.45:1 light, 8.12:1 dark). It resolves per theme through --bg and
     --accent-text. A control that sets outline:none uses this instead; the old
     8% ink wash was 1.18:1 (M4-0407, audit G5-03). */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text);

  /* Chart series slots: the v3 Usage board's validated pair (D129/D133:
     #c27a1a/#2f62a8 light, #bf8024/#5b8fd6 dark, CVD-checked); the raw --honey
     fails contrast on the light surface, so it is not slot 1. */
  --series-1: #c27a1a;
  --series-2: #2f62a8;

  /* The map's paint colours, in sRGB on purpose: mapbox-gl 3.9.4 cannot parse
     oklch() (its csscolorparser takes keywords, #rgb, #rrggbb and comma rgb/hsl
     only), and getComputedStyle returns a custom property exactly as written.
     Fence and track differ in lightness (0216): OKLab L 0.64 vs 0.46 light,
     0.80 vs 0.62 dark. Device colours past the first (M4-0277): OKLab L 0.52
     and 0.51 light, 0.64 and 0.60 dark, so every track stays at least 0.10 from
     the fence (D73 5). Defined here once (M4-0407, audit G5-33). */
  --map-track: #1f5f8b;
  --map-fence: #c97a12;
  --map-gated: #c4472f;
  --map-track-2: #2e7a4f;
  --map-track-other: #6e655a;
  /* The Map's device palette (M4-0416, K9 → Q1): the first six devices in the
     panel's order each get their own colour, the rest share --map-track-other.
     OKLab L 0.47 0.52 0.50 0.53 0.51 0.50 light, 0.63 0.64 0.66 0.64 0.64 0.64
     dark: every one at least 0.12 from --map-fence (0.65 / 0.78), past 0216's
     0.10. --map-track-1 is --map-track and --map-track-2 is itself. */
  --map-track-1: #1f5f8b;
  --map-track-3: #6b4fa0;
  --map-track-4: #a83f6e;
  --map-track-5: #1d7373;
  --map-track-6: #5a6a1e;
  /* A pin's ring is the surface it sits on, --bg-elev resolved to sRGB, so
     mapbox-gl can read it (G2-18). */
  --map-pin-ring: #fffdfa;

  color-scheme: light;
}

/* Dark: follows the OS by default, unless explicitly overridden to light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(16% 0.012 60);
    --bg-elev: oklch(20% 0.015 60);
    --bg-sunk: oklch(13% 0.01 60);
    --line: oklch(28% 0.018 60);
    --line-strong: oklch(38% 0.025 60);
    --skel-a: color-mix(in oklch, var(--ink) 9%, transparent);
    --skel-b: color-mix(in oklch, var(--ink) 16%, transparent);
    --ink: oklch(96% 0.008 80);
    --ink-2: oklch(82% 0.012 75);
    --ink-3: oklch(65% 0.02 70);
    --ink-4: oklch(60% 0.02 65);

    --green: oklch(76% 0.13 155);
    --green-soft: oklch(28% 0.05 155);
    --red: oklch(74% 0.15 25);
    --red-soft: oklch(29% 0.06 25);
    --blue: oklch(76% 0.11 245);
    --blue-soft: oklch(28% 0.05 245);

    --accent-text: var(--honey);
    --accent-solid: var(--honey);
    --accent-solid-ink: oklch(15% 0.02 60);

    --series-1: #bf8024;
    --series-2: #5b8fd6;
    --map-track: #4a90c2;
    --map-fence: #f0a53a;
    --map-gated: #ef7b63;
    --map-track-2: #48a07a;
    --map-track-other: #8a7f6c;
    --map-track-1: #4a90c2;
    --map-track-3: #9a7fd1;
    --map-track-4: #c76596;
    --map-track-5: #3a9e9e;
    --map-track-6: #8c9440;
    --map-pin-ring: #1b150f;

    color-scheme: dark;
  }
}

/* Manual override wins in both directions. */
:root[data-theme="dark"] {
  --bg: oklch(16% 0.012 60);
  --bg-elev: oklch(20% 0.015 60);
  --bg-sunk: oklch(13% 0.01 60);
  --line: oklch(28% 0.018 60);
  --line-strong: oklch(38% 0.025 60);
  --skel-a: color-mix(in oklch, var(--ink) 9%, transparent);
  --skel-b: color-mix(in oklch, var(--ink) 16%, transparent);
  --ink: oklch(96% 0.008 80);
  --ink-2: oklch(82% 0.012 75);
  --ink-3: oklch(65% 0.02 70);
  --ink-4: oklch(60% 0.02 65);

  --green: oklch(76% 0.13 155);
  --green-soft: oklch(28% 0.05 155);
  --red: oklch(74% 0.15 25);
  --red-soft: oklch(29% 0.06 25);
  --blue: oklch(76% 0.11 245);
  --blue-soft: oklch(28% 0.05 245);

  --accent-text: var(--honey);
  --accent-solid: var(--honey);
  --accent-solid-ink: oklch(15% 0.02 60);

  --series-1: #bf8024;
  --series-2: #5b8fd6;
  --map-track: #4a90c2;
  --map-fence: #f0a53a;
  --map-gated: #ef7b63;
  --map-track-2: #48a07a;
  --map-track-other: #8a7f6c;
  --map-track-1: #4a90c2;
  --map-track-3: #9a7fd1;
  --map-track-4: #c76596;
  --map-track-5: #3a9e9e;
  --map-track-6: #8c9440;
  --map-pin-ring: #1b150f;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
  }
}