/* generated public-safe brand tokens + site skin */
/* ============================================================
   AGENTGECKO COCKPIT — DESIGN TOKENS
   RED THREAD (S0903): the gold-gecko emblem — gold + electric blue on black.
   Two-layer law: CHROME = brand identity. DATA = semantic, never themed.
   ============================================================ */

/* vendored Space Grotesk — only 500 + 700 exist; 400 maps to 500 */
/* ------------------------------------------------------------------
   S0903 DESIGN-2 — THE EMBLEM PALETTE, MEASURED (operator ruling 35, 2026-09-03 02:05).

   "Use these EXACT colours for the app surface for everything … the colours you are
   using are very bad on the app. I want the exact same colours as in this image."

   Every CHROME hex below was MEASURED, not chosen. Source of truth:
     image    data/assets/brand/agentgecko_emblem_v2.png   (1254x1254, operator's v2
              emblem: "AGENT GECKO INTELLIGENCE" — gold gecko, electric-blue
              holographic globe, gold tick-ring, black ground)
     sha256   85ca81d4809cfa40a3414355660c3a89e7aaecd3444ec15542da5faafae555a7
     method   weighted k-means, k=8, k-means++ init, 5 restarts, best inertia, over
              842,619 non-black pixels (729,897 near-pure-black pixels excluded at
              r,g,b<=8). Every centroid is an exact weighted mean of real pixel values.
     receipts data/assets/brand/PALETTE_V2.json  (hex · pixel share · role · contrast)
              data/assets/brand/PALETTE_V2_swatch.png

   DESIGN-1's palette was eyeballed from the same emblem and the operator rejected it.
   The delta that mattered: page base #05070C -> #000000 (his ground is PURE black),
   gold #C9A227 -> #D0B168 (his gold is lighter and less acidic), blue #1E6BFF ->
   #0A4B8A structural + #27A1DE glow (his blue is cyan-leaning, not royal), ink
   #E8ECF5 -> #F4E4B8 (his wordmark is warm ivory, not cold white).

   What did NOT change, and never may: the DATA / SEMANTIC verdict block below. Green is
   spent on "verified live", amber on stale, red on down, grey on unknown. Gold and
   electric blue are CHROME — brand accents, primary actions, links, focus — and are
   never allowed to carry a verdict. Equally, no verdict colour is allowed to become
   ambient decoration: the moment green is everywhere, green stops meaning anything,
   which is the exact shape of the frozen-price fake-green that cost real money.

   The --violet-* / --plasma-* names are kept rather than renamed. They are load-bearing
   across ~1300 lines of app.css and the site stylesheet; re-pointing the values moves the
   whole product to the emblem palette in one place, while a rename would be a
   large, risky, purely cosmetic diff. The names are historical, the values are
   current — a comment is cheaper than a regression.
   ------------------------------------------------------------------ */
:root {
  color-scheme: dark;         /* the cockpit is dark-only by design */

  /* ============================================================
     MEASURED FROM THE EMBLEM — canonical names, exact hexes.
     The trailing number is that colour's share of the emblem's pixels.
     ============================================================ */
  /* ------------------------------------------------------------------
     S0904 PALETTE_V3 — PERCEIVED colours (operator correction 2026-09-03 05:15 CEST:
     "the colors … are so ugly and they don't look anything like the colors that
     you're supposed to have"). DESIGN-2's k-means centroids were the AVERAGE
     shadow tones of the metal and the globe, so the "measured" gold #D0B168 read
     MUSTARD and #052141 read FLAT NAVY once they were spent as surfaces and body
     ink. V3 samples what the eye actually sees: the brightest decile of each hue
     family (the metal highlight, the glow) — receipts data/assets/brand/PALETTE_V3.json
     (method, pixel regions, contrast) + PALETTE_V3_swatch.png; PALETTE_V2.json is
     kept as the receipt of what was rejected. Source image unchanged:
     data/assets/brand/agentgecko_emblem_v2.png
     sha256 85ca81d4809cfa40a3414355660c3a89e7aaecd3444ec15542da5faafae555a7
     Spending law (V3): text is IVORY, never gold. Gold = wordmark, primary actions,
     one accent line per panel, numeric emphasis. Electric blue = borders, grid,
     links, focus, active nav, hairlines (bloom via the ONE --glow). Deep blue exists
     ONLY as a low-alpha liquid-glass tint over pure black. Verdict colours unchanged.
     ------------------------------------------------------------------ */
  --bg:        #000000;   /* page ground: corner patches 100% #000000 */
  --bg-1:      #04090F;   /* raised base: black with a breath of the globe's blue */
  --blue-deep: #052141;   /* glass TINT ONLY (low alpha over --bg); never a surface on its own */
  --gold-deep: #422E11;   /* gold in shadow (V2 centroid) — dividers in shadow only */
  --blue:      #0A4988;   /* globe LINE colour (p55–p75 of the blue family): chart grid, inactive strokes */
  --gold-mid:  #BC974C;   /* warm metal mid-tone (p55–p75 of the gold family): rings, rules — never text */
  --gold:      #FBE9A4;   /* THE brand gold = metal HIGHLIGHT (mean of the brightest decile) 17.29:1 on --bg */
  --gold-hi:   #FFF9BF;   /* specular peak (p99.5): hover / active */
  --blue-glow: #36B9ED;   /* electric-blue glow (mean of the brightest decile) 9.32:1 on --bg */
  --blue-core: #59EBFF;   /* bloom core (p99.5): focus ring, hover */
  --text:      #F3F1EA;   /* BODY INK — ivory near-white, 18.58:1 on --bg, 17.59:1 on glass */

  /* ---- SURFACES: liquid glass = deep blue at LOW alpha over pure black + 1px luminous edge ----
     S0905 PALETTE_V4 (Fable design seat, ruling 36; operator 2026-09-03 05:15 "I cannot take
     these blue and mustard yellow colours"). V3 kept the measured hexes right but still
     painted NAVY SLABS: the topnav at rgba(5,33,65,.86), the statusbar at .90, the drawer at
     .96, CDP cards at .72 — every one of them composites to a flat #041C38 navy over black.
     V4 law: --blue-deep may tint a surface at alpha <= 0.40 ONLY (composite stays under
     #02101F = black with a breath of blue); every opaque chrome surface is --glass-strong,
     a NEAR-BLACK glass (rgba(3,12,24,.86) -> #030B16), and every panel carries the 1px
     electric-blue edge WITH its bloom (--glass-edge + --glass-bloom). Gold is spent on
     numerals, the wordmark and rings only. Receipts: data/assets/brand/PALETTE_V4.json
     (composites + WCAG numbers) — src/components/Design2.test.js pins both the hexes and
     the alpha ceiling. */
  --bg-0: var(--bg);                      /* historical name for the page base */
  --glass: rgba(5, 33, 65, 0.22);         /* panel body: --blue-deep @ .22 over --bg = #010816 */
  --glass-strong: rgba(3, 12, 24, 0.86);  /* sticky chrome / modals / drawer: near-black glass = #030B16 */
  --glass-edge: rgba(54, 185, 237, 0.30); /* the 1px luminous edge (electric blue) */
  --glass-bloom: 0 0 0 1px rgba(54, 185, 237, 0.05), 0 0 24px rgba(54, 185, 237, 0.14); /* the bloom OUTSIDE the edge */
  --bg-2: rgba(5, 33, 65, 0.16);          /* third depth = glass tint, never opaque navy */
  --panel: var(--glass);                  /* historical name: liquid glass */
  --panel-strong: var(--glass-strong);    /* historical name: modals / sticky chrome */
  --shadow-navy: var(--blue-deep);
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.72);

  /* Electric blue — data, links, focus, active nav, charts. Historical names, V3 values. */
  --plasma: var(--blue);          /* structural blue: rules, chart grid, inactive strokes */
  --plasma-glow: var(--blue-glow);/* the legible-on-black variant */
  --violet: var(--blue-glow);     /* historical name, emblem value: accent text + rules */
  --violet-bright: var(--blue-core);
  --violet-dim: rgba(54, 185, 237, 0.46);
  --violet-wash: rgba(54, 185, 237, 0.10);

  /* Gold — wordmark, primary actions, one accent line per panel, numeric emphasis. Never a verdict. */
  --gold-bright: var(--gold-hi);
  --gold-dim: rgba(251, 233, 164, 0.55);
  --gold-wash: rgba(251, 233, 164, 0.08);

  --hairline: rgba(54, 185, 237, 0.24);       /* chrome rules — electric-blue hairline */
  --hairline-soft: rgba(54, 185, 237, 0.12);  /* inner table rules */
  --grid: rgba(54, 185, 237, 0.06);           /* the holographic page backdrop */
  --glow: 0 0 22px rgba(54, 185, 237, 0.38);  /* ONE glow value; no per-component glows */
  --scanline: rgba(54, 185, 237, 0.028);
  --panel-inner-hi: inset 0 1px 0 rgba(89, 235, 255, 0.30); /* the 1px luminous glass edge (top highlight) */
  --glass-blur: 14px;
  --boot-band: 210px;         /* the black band under the boot film: wordmark + counter + square loader.
                                 MUST equal BOOT_BAND_POINTS in src-tauri/src/native_boot.rs. */

  /* ---- DATA / SEMANTIC (protected — never spend on brand) ---- */
  /* V3 ink ramp: ivory near-white and two neutral steps. All three clear WCAG AA 4.5:1
     against the WORST surface in the app (--panel-strong over --bg ≈ #04101F):
     ink 18.58:1 on --bg · dim 12.1:1 on --bg · faint 6.9:1 on --bg (5.9:1 on glass). */
  --ink: var(--text);         /* #F3F1EA */
  --ink-dim: #C9C6BC;         /* secondary prose, labels */
  --ink-faint: #97958C;       /* tertiary: sources, timestamps */
  --up: #3df0a0;              /* live / positive / long */
  --down: #ff5d5d;            /* negative / short / error */
  --stale: #ffb74d;           /* STALE / MISSING / caution */
  --link: var(--blue-glow);   /* links / timestamps — emblem node-bloom blue, 7.24:1 on --bg */

  /* ---- TYPE ---- */
  --font-display: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* One scale, eight steps. Numbers are ALWAYS mono and ALWAYS tabular
     (see app.css .num/.mono) so a price column cannot jitter on refresh —
     a correctness rule, not taste. */
  --fs-micro: 9px;            /* chips, source labels           tracking .18em */
  --fs-label: 10px;           /* panel titles, stat labels      tracking .16em */
  --fs-body: 12px;            /* prose, table cells             normal */
  --fs-num: 13px;             /* all numerals (mono)            normal */
  --fs-h3: 14px;              /* panel headline values          tracking .04em */
  --fs-h2: 18px;              /* room titles                    tracking .06em */
  --fs-h1: 24px;              /* boot wordmark, site heads      tracking .32em */
  --fs-hero: clamp(34px, 5vw, 56px); /* site hero only */
  --track-micro: 0.18em;
  --track-label: 0.16em;
  --track-h3: 0.04em;
  --track-h2: 0.06em;
  --track-h1: 0.32em;

  /* ---- SPACING (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-2h: 10px; --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* ---- MOTION BUDGET (design brief §4) ---- */
  --t-hover: 120ms;           /* hover / focus */
  --t-panel: 200ms;           /* panel enter */
  --t-route: 160ms;           /* route change, opacity only — no slide */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- GEOMETRY (Bloomberg density) ---- */
  --radius: 4px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --tap-target: 44px;
  --nav-content-h: 46px;
  --nav-h: calc(var(--nav-content-h) + var(--safe-top));
  --row-h: 24px;
  --statusbar-content-h: 26px;
  --statusbar-h: calc(var(--statusbar-content-h) + var(--safe-bottom));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
/* S0903 DESIGN-1: the site and the cockpit share ONE token file, so the emblem
   palette below arrives automatically. The hero gains the startup poster as a
   darkened backdrop so the website and the app boot read as one product. */
body {
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.6;
  background-image:
    radial-gradient(900px 500px at 80% 5%, var(--violet-wash), transparent 65%),
    radial-gradient(700px 420px at 0 65%, var(--gold-wash), transparent 70%);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 12px; top: 12px; z-index: 50; padding: 10px 14px; background: var(--panel-strong); color: var(--gold); }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px max(22px, var(--safe-right));
  /* S0905 PALETTE_V4 parity: the same near-black glass + luminous edge as the app's topnav */
  background: var(--glass-strong); border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 1px 0 rgba(54, 185, 237, 0.08), 0 10px 34px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(var(--glass-blur));
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.mark { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(54, 185, 237, 0.25), var(--glow); }
.brand strong, .brand small { display: block; letter-spacing: .18em; line-height: 1.2; }
.brand strong { font-size: 12px; color: var(--gold); }
.brand small { font-size: 8px; color: var(--violet-bright); }
.gate { padding: 9px 14px; border: 1px solid var(--violet-dim); border-radius: 999px; background: var(--violet-wash); color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.gate:hover { color: var(--blue-core); border-color: var(--blue-glow); box-shadow: var(--glow); text-decoration: none; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/og-poster.png') center/cover no-repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.hero { position: relative; isolation: isolate; max-width: 1160px; min-height: 72vh; margin: 0 auto; padding: clamp(58px, 10vh, 116px) 24px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
/* V4: the eyebrow is brand blue — amber is a verdict colour and is never decoration */
.eyebrow { margin-bottom: 22px; color: var(--blue-glow); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
h1 { font-size: clamp(38px, 6vw, 70px); line-height: 1.02; letter-spacing: -.02em; }
h1 em { color: var(--gold); font-style: normal; }
.lede { max-width: 58ch; margin: 24px 0 30px; color: var(--ink-dim); font-size: clamp(16px, 1.7vw, 19px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: var(--tap-target); display: inline-flex; align-items: center; padding: 12px 20px; border-radius: var(--radius); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.button:hover { text-decoration: none; transform: translateY(-1px); }
.primary { color: var(--ink); border: 1px solid var(--blue-glow); background: var(--violet-wash); box-shadow: var(--glow); }
.primary:hover { color: var(--blue-core); border-color: var(--blue-core); }
.secondary { color: var(--ink); border: 1px solid var(--violet-dim); background: var(--glass); }
.posture { margin-top: 18px; color: var(--ink-faint); font-size: 9px; letter-spacing: .1em; }
.medallion img { display: block; width: min(440px, 82vw); height: auto; margin: auto; border-radius: 50%; filter: drop-shadow(0 0 58px rgba(54, 185, 237, .28)); }
.principles { border-top: 1px solid var(--hairline); max-width: 1160px; margin: 0 auto; padding: 72px 24px 92px; }
h2 { max-width: 760px; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
article { padding: 24px; border: 1px solid var(--glass-edge); border-radius: var(--radius-lg, 8px); background: var(--panel); box-shadow: var(--panel-inner-hi), var(--glass-bloom); backdrop-filter: blur(var(--glass-blur)); }
h3 { margin-bottom: 10px; color: var(--blue-glow); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
article p { color: var(--ink-dim); font-size: 14px; }
footer { display: flex; justify-content: space-between; padding: 26px max(24px, calc((100vw - 1112px)/2)); border-top: 1px solid var(--hairline); color: var(--ink-faint); font-size: 9px; letter-spacing: .13em; }
.footer-links { display: flex; gap: 18px; }
/* S0904 PUBLISH-1: shared layout for standalone legal pages (privacy, terms) — reuses the
   page tokens/typography, scaled down from the hero's display sizes. */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vh, 88px) 24px 96px; }
.legal .eyebrow { margin-bottom: 16px; }
.legal h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -.01em; }
.legal .updated { margin: 14px 0 40px; color: var(--ink-faint); font-size: 11px; letter-spacing: .1em; }
.legal h2 { max-width: none; margin: 34px 0 10px; color: var(--blue-glow); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.legal p { max-width: 68ch; margin-bottom: 14px; color: var(--ink-dim); font-size: 15px; }
.legal p:first-of-type { margin-top: 0; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .medallion { order: -1; }
  .grid { grid-template-columns: 1fr; }
  .gate { font-size: 0; }
  .gate::after { content: "GATE"; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .button:hover { transform: none; }
}