/*
 * Green Era tokens v1.7 (2026-08-08). The Alt League design system,
 * product register. Canonical brand values come from altleague.com;
 * architecture comes from AltOS team-next (the reference implementation).
 *
 * Rules:
 *  - Components use ONLY the semantic vars. Raw hex lives in this file alone.
 *  - ONE accent: Kelly Green marks action and identity, nothing else.
 *  - Type floors: body 18px, no UI label under 14px.
 *
 * WHICH ACCENT VAR TO USE (read this before styling anything accent-colored):
 *  --accent      decorative only: fills, tints, hairlines, focus rings, and
 *                graphical marks. WCAG 1.4.11 puts these at a 3:1 floor,
 *                which Kelly clears on every ground.
 *  --accent-ink  anything that carries meaning: text, icons that convey
 *                state, and solid controls that hold a label. Clears the
 *                4.5:1 text floor on every ground in its theme.
 * On dark, --accent-ink IS --accent, so this collapses to one accent there.
 * Plain Kelly is NOT legible as text on light grounds (3.32:1 on white),
 * which is why --accent-ink exists. See the matrix in DESIGN-SYSTEM.md §8.
 *
 * TWO PAIRINGS THAT ARE NEVER SAFE (measured, both themes):
 *  1. Accent-colored TEXT on an --accent-soft ground. The tint pulls the
 *     ground toward the text: dark lands at 4.01:1, light at 4.50:1. For an
 *     emphasis chip, ground it on --bg-sunken and keep the accent in the
 *     text and hairline.
 *  2. --text-3 on an --accent-soft ground in DARK (4.11:1 over --bg-raised).
 *     Selected and hover rows are the usual offender. Use --text-2 there.
 *
 * Fonts: self-host woff2 preferred. Copy from
 * AltOS/workstreams/headless-ui/team-next/public/fonts/ and adjust paths,
 * or load from Google Fonts:
 * https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=DM+Mono:wght@400;500&display=swap
 */

/* Font loading, rewired to Redact's own static mount. This is the one
   sanctioned local change to this file: the woff2 files are served by the
   same FastAPI StaticFiles mount as the rest of the frontend. Every token
   value below is byte-identical to the canonical package. */
@font-face {
  font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: local('Syne'), url('fonts/syne-latin-400-800.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: local('DM Sans'), url('fonts/dm-sans-latin-400-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: local('DM Mono'), url('fonts/dm-mono-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: local('DM Mono Medium'), url('fonts/dm-mono-latin-500.woff2') format('woff2');
}

:root {
  /* brand constants (never used directly by components) */
  --kelly: #0FA254;        /* THE accent */
  --kelly-lifted: #17C168; /* Kelly, lifted for legibility on DARK grounds */
  --kelly-deep: #0A703A;   /* Kelly, deepened for legibility on LIGHT grounds */
  --field: #06261A;        /* deep field green, primary dark ground */
  --deeper: #041B12;       /* recessed band / overlay ground */
  --tile: #0C3B26;         /* raised dark surface */
  --paper: #FFFFFF;
  --near-black: #04160E;
  --off-white: #F4F1E9;

  /* type */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --fs-body: 18px; --fs-sm: 15px; --fs-label: 14px;
  --fs-h3: 22px; --fs-h2: 26px; --fs-h1: 31px;   /* ~1.2 scale off 18 */
  --lh-body: 1.55; --lh-tight: 1.3;
  --track-label: 0.12em;   /* mono label tracking */
  --measure: 720px;

  /* geometry */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 100px; --tap: 44px;

  /* motion */
  --ease-brand: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* two-layer focus ring: 2px gap in the ground color, then 2px accent.
     Pair with `outline: 2px solid transparent` at the use site so
     forced-colors mode still draws a ring. Raised planes override
     --focus-ground locally. */
  --focus-ring: 0 0 0 2px var(--focus-ground, var(--bg)), 0 0 0 4px var(--accent);

  /* Overlay scrim. Anchored to the near-black constant on purpose: a scrim
     derived from --foreground or --text-1 inverts with the theme and would
     LIGHTEN the page in dark mode instead of receding. */
  --scrim: color-mix(in srgb, var(--near-black) 62%, transparent);
}

/* light (default) */
:root, :root[data-theme='light'] {
  --bg: var(--paper);
  --bg-soft: var(--off-white);
  --bg-raised: #FFFFFF;
  --bg-sunken: #ECE8DE;
  --text-1: var(--near-black);
  --text-2: rgba(4, 22, 14, 0.72);
  --text-3: rgba(4, 22, 14, 0.62); /* 0.50 fails AA at 14px on --bg-soft; 0.62 is ~5.0:1 */
  --line: rgba(4, 22, 14, 0.14);
  --accent: var(--kelly);          /* decorative only on light: 3.32:1 as text */
  --accent-ink: var(--kelly-deep); /* use for text, stateful icons, filled controls */
  --accent-soft: rgba(15, 162, 84, 0.12);
  --on-accent: #FFFFFF;            /* pair with --accent-ink fills, NOT --accent */
  --danger: #B4433A;               /* 4.51:1 on --bg-sunken, its tightest ground */
  --frame: #ECE8DE;
  --rail: var(--off-white);
  --edge: rgba(4, 22, 14, 0.12);
  --motion: var(--kelly);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: var(--field);
    --bg-soft: #07301F;
    --bg-raised: var(--tile);
    --bg-sunken: var(--near-black);
    --text-1: var(--off-white);
    --text-2: rgba(244, 241, 233, 0.74);
    --text-3: rgba(244, 241, 233, 0.6); /* a11y floor at 14px on dark grounds */
    --line: rgba(244, 241, 233, 0.16);
    --accent: var(--kelly-lifted);
    --accent-ink: var(--accent);   /* dark already lifts; one accent here */
    --accent-soft: rgba(23, 193, 104, 0.16);
    --on-accent: var(--near-black);
    --danger: #E6877F;             /* was #E06A60: only 3.83:1 on --bg-raised */
    --frame: #020D07;
    --rail: var(--near-black);
    --edge: rgba(244, 241, 233, 0.09);
    --motion: #4FEFA0;             /* light-in-motion only, never a control */
  }
}
:root[data-theme='dark'] {
  --bg: var(--field); --bg-soft: #07301F; --bg-raised: var(--tile); --bg-sunken: var(--near-black);
  --text-1: var(--off-white); --text-2: rgba(244, 241, 233, 0.74); --text-3: rgba(244, 241, 233, 0.6);
  --line: rgba(244, 241, 233, 0.16);
  --accent: var(--kelly-lifted); --accent-ink: var(--accent);
  --accent-soft: rgba(23, 193, 104, 0.16); --on-accent: var(--near-black);
  --danger: #E6877F;
  --frame: #020D07; --rail: var(--near-black); --edge: rgba(244, 241, 233, 0.09);
  --motion: #4FEFA0;
}

html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text-1);
}

/* Display type helper: the brand headline treatment */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* Mono label helper: kickers, buttons, metadata */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
}

/* NO MOTION RESTRAINT. Deliberate, decided 2026-08-08.
   Motion is part of this brand, and an accessibility pass must not strip it.
   Do not add a prefers-reduced-motion collapse here or in any app: it is
   WCAG 2.3.3, which is AAA, so its absence does not affect the AA conformance
   every Alt League app is held to. If this is ever revisited, revisit it here
   once rather than app by app. */