/* Goobert design tokens.
 *
 * The one source of colour, type, spacing, rules and motion for every Goobert surface: goobert.ai, the docs and the
 * API reference, server-rendered pages (login.goobert.ai, account recovery), and generated result pages. The
 * terminal palette for the CLI and TUI is in tokens.json (same values). How each surface uses this file:
 * README.md beside it. The reasons behind each value: GOOBERT-GUIDE.md, part 3.
 *
 * Two themes. "field" (the default, and the brand): green page, green-black ink, black plates. "night": the page
 * goes black and the band turns green; opt-in with <html data-theme="night">. The site never switches on the
 * visitor's OS setting alone (GOOBERT-GUIDE.md, decision D3).
 *
 * Names below are a contract: components use the semantic names (--field, --ink, --night, --glow, --status-*),
 * never the primitives, so a theme only redefines semantics. goobert.ai links this file, then components.css, then
 * its own css/site.css, which defines no tokens of its own.
 */
/* Fonts, self-hosted (no third-party requests): subset WOFF2 files under goobert-frontend/fonts/, served at /fonts/,
 * with their SIL Open Font Licences beside them. Archivo is variable in width (62-100%) and weight (400-900);
 * JetBrains Mono in weight (400-800), plus a 400 italic. The URLs are relative to /design/tokens.css. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* ---- primitives: the palette. Never referenced by components. ---- */
  --p-green: #9be89b;            /* Goobert */
  --p-leaf: #c4f2c1;             /* the field, lit: inside a form */
  --p-ink: #04130a;              /* green-black */
  --p-night-2: #0b2213;          /* a panel on a plate */
  --p-night-3: #12301c;          /* a panel on a panel (night theme only) */
  --p-mist: #d9f5d9;             /* text on a plate that is not green */
  --p-cond: #5fae66;             /* conditional */
  --p-amber: #f0c24b;            /* in dispute */
  --p-red: #ff6a55;              /* refuted; on black only */
  --p-open: #c8d8cb;             /* nothing established */

  /* ---- semantic colour: the field theme ---- */
  --field: var(--p-green);       /* the page */
  --leaf: var(--p-leaf);         /* a form's inside; a focused input */
  --ink: var(--p-ink);           /* text, rules that open a section, controls */
  --head-ink: var(--p-ink);      /* headings */
  --ink-2: rgba(4, 19, 10, 0.76);   /* secondary text: 7.2:1 on the field */
  --ink-3: rgba(4, 19, 10, 0.64);   /* labels, meta, numbers in the margin: 4.9:1 (was 0.56, 3.9:1) */
  --rule: rgba(4, 19, 10, 0.22);    /* hairlines between rows */
  --rule-strong: var(--p-ink);      /* the rule that opens a numbered section */

  --night: var(--p-ink);         /* plates, seals, the marking, code */
  --night-2: var(--p-night-2);
  --glow: var(--p-green);        /* green on a plate */
  --glow-2: rgba(155, 232, 155, 0.72);  /* 7.1:1 on night */
  --glow-3: rgba(155, 232, 155, 0.60);  /* 5.3:1 on night (was 0.46, 3.6:1) */
  --glow-rule: rgba(155, 232, 155, 0.2);
  --glow-text: var(--p-mist);    /* labels in the explorer, long text on a plate */
  --plate-edge: transparent;     /* a plate's outline; visible only in night */

  --band-bg: var(--p-ink);       /* the front page's band */
  --band-fg: var(--p-green);

  /* status hues: only ever on a plate or a seal (black), never on the field */
  --status-held: var(--p-green);     /* checked, certified, checked-unreviewed, published, reviewed */
  --status-cond: var(--p-cond);      /* any *-conditional */
  --status-warn: var(--p-amber);     /* contested, orphaned, partially-checked; flags such as at_risk */
  --status-bad: var(--p-red);        /* refuted, suspect */
  --status-open: var(--p-open);      /* open, recorded */
  /* older names, kept so site.css works unchanged */
  --cond: var(--status-cond);
  --amber: var(--status-warn);
  --red: var(--status-bad);

  /* the field's texture: one dot every 24px. Plates get the green one. */
  --formwork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='1' height='1' fill='%2304130a' fill-opacity='.16'/%3E%3C/svg%3E");
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='1' height='1' fill='%239be89b' fill-opacity='.22'/%3E%3C/svg%3E");

  /* ---- type ---- */
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;   /* data, labels, code, anything you would copy */
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;      /* prose: ledes, sections, docs */
  --head: "Archivo", "Arial Narrow", sans-serif;               /* headings: 900, condensed, uppercase */
  --head-weight: 900;
  --head-stretch: 62%;
  --head-track: -0.01em;

  --t-band: clamp(88px, 13vw, 220px);    /* the ticker band; 22vw on a phone */
  /* Headings sized to their content (site-direction, Oct 29: the 136px h1 shouted over the page it heads). */
  --t-h1: clamp(40px, 5.4vw, 84px);      /* a dossier's heading; also the profile handle */
  --t-h1-long: clamp(32px, 3.8vw, 58px); /* a heading over ~24 characters */
  --t-figure: clamp(36px, 3.8vw, 56px);  /* numbers taken in at a glance */
  --t-h2: 30px;                          /* a section */
  --t-h3: clamp(24px, 2.6vw, 36px);      /* a row's big word */
  --t-lede: 20px;                        /* Archivo, 1.5 */
  --t-prose: 18px;                       /* Archivo, 1.6 */
  --t-body: 14px;                        /* mono, 1.6 */
  --t-data: 13px;                        /* tables, commands */
  --t-small: 12px;
  --t-label: 11px;                       /* uppercase, tracked 0.16em */
  --t-micro: 10px;                       /* tags, seal feet; uppercase, tracked 0.14em */
  --lh-head: 0.88;
  --lh-lede: 1.5;
  --lh-prose: 1.6;
  --track-label: 0.16em;
  --track-tag: 0.14em;
  --measure: 38em;                       /* the longest line of prose */

  /* ---- space: 4px steps up to 16, then doubling-ish ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- layout: one gutter, one margin, one width ---- */
  --side: 56px;                  /* THE gutter: page edge to content, everywhere */
  --margin: 160px;               /* the left margin a section's number sits in */
  --wide: 1240px;                /* the widest content column */
  --bar-h: 56px;                 /* a full control; small controls are 40px */
  --bar-h-small: 40px;

  /* ---- shape ---- */
  --radius: 0;                   /* square corners, always */
  --hair: 1px;                   /* rules between rows */
  --line: 1.5px;                 /* tags, selects */
  --stroke: 2px;                 /* buttons, inputs, form plates, focus */

  /* ---- motion: it carries meaning or it does not move ---- */
  --m-instant: 0ms;
  --m-quick: 120ms;              /* a row inverting, a control's state */
  --m-enter: 500ms;              /* a step or a node arriving */
  --m-ease-enter: cubic-bezier(0.2, 0.7, 0.2, 1);
  --m-blink: 900ms;              /* "working": steps(1), never eased */
  --m-ticker: 60s;               /* one pass of the band */
  --m-watch: 4.5s;               /* the mark's blink */

  color-scheme: light;
}

@media (max-width: 860px) {
  :root { --side: 20px; --margin: 0px; --t-band: 22vw; }
}

/* ---- night: the page goes black, the band turns green. Plates sit one step lighter, with an edge. ---- */
:root[data-theme="night"] {
  --field: var(--p-ink);
  --leaf: var(--p-night-2);
  --ink: var(--p-mist);
  --head-ink: var(--p-green);
  --ink-2: rgba(217, 245, 217, 0.76);   /* 9.6:1 */
  --ink-3: rgba(217, 245, 217, 0.62);   /* 6.7:1 */
  --rule: rgba(155, 232, 155, 0.2);
  --rule-strong: rgba(155, 232, 155, 0.6);

  --night: var(--p-night-2);
  --night-2: var(--p-night-3);
  --glow-3: rgba(155, 232, 155, 0.62);  /* 5.2:1 on night-2 */
  --plate-edge: rgba(155, 232, 155, 0.2);

  --band-bg: var(--p-green);
  --band-fg: var(--p-ink);

  --formwork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='1' height='1' fill='%239be89b' fill-opacity='.12'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* more contrast when asked: secondary text becomes ink */
@media (prefers-contrast: more) {
  :root, :root[data-theme="night"] { --ink-2: var(--ink); --ink-3: var(--ink); --glow-2: var(--glow); --glow-3: var(--glow); --rule: var(--ink); }
}

/* reduced motion: nothing moves; the band becomes a still line, the explorer jumps instead of easing */
@media (prefers-reduced-motion: reduce) {
  :root { --m-quick: 0ms; --m-enter: 0ms; }   /* components also set animation: none */
}