/* Reset, aliases, and element defaults.
 *
 * The values come from the HeyOz token layer (heyoz-tokens.css, loaded before
 * this file): every colour, space and face below is an alias onto an --oz-*
 * token, so both interfaces draw from one design system again. The aliases are
 * kept - rather than using --oz-* names downstream - because the rest of the
 * stylesheets consume a six-name vocabulary sized to this app, and because the
 * one-place-for-values gate (tests/test_design_system.py) holds every other
 * sheet to names defined HERE.
 *
 * Theme: the token layer flips on data-theme="dark" / "light" and knows
 * nothing about prefers-color-scheme, so js/theme.js always stamps a RESOLVED
 * theme before first paint - the saved choice when there is one, the OS's
 * answer otherwise - and re-stamps when the OS changes. There is no
 * unstamped state to style.
 */

:root {
  /* Surfaces, back to front. */
  --c-bg: var(--oz-color-background);
  --c-sunk: var(--oz-color-surface-primary);
  --c-raised: var(--oz-color-surface-elevated);
  --c-line: var(--oz-color-border-primary);

  /* Ink, loudest to quietest. */
  --c-ink: var(--oz-color-content-primary);
  --c-ink-2: var(--oz-color-content-secondary);
  --c-ink-3: var(--oz-color-content-tertiary);

  /* One accent, used for the primary action and nothing decorative - and the
     focus ring, which the system gates for contrast separately. */
  --c-accent: var(--oz-color-fill-brand);
  --c-accent-ink: var(--oz-color-content-on-brand);
  --c-focus: var(--oz-color-border-focus);

  /* Verdicts. Never the only carrier of meaning - each is paired with words. */
  --c-good: var(--oz-color-content-success);
  --c-warn: var(--oz-color-content-warning);
  --c-bad: var(--oz-color-content-critical);

  /* Media coding (decision D5): an image is the brand accent, a video is
     purple. `--c-media-video` is declared in css/media-accent.css, which both
     interfaces link - see that file for why it is not written here. */
  --c-media-image: var(--c-accent);

  /* The button's physical edge: a face on a hard plate, no blur and no
     gradient, which presses when clicked. The face is deliberately not the
     brand colour - brand red on a warm ground is a shout - and the ink on it
     is near-black in both themes, because the accent swaps to yellow in dark
     and white text on yellow is not text. */
  --c-chrome-face: var(--oz-color-chrome-face);
  --c-chrome-edge: var(--oz-color-chrome-edge);
  --c-chrome-shadow: var(--oz-color-chrome-shadow);
  --c-chrome-ink: var(--oz-color-chrome-ink);

  /* Over the photograph. These sit on top of an arbitrary image, not on a
     themed surface, so they deliberately do NOT move with the theme: the
     white checkerboard is the one universal sign for transparency, and the
     dark glass pills must hold against any picture in either scheme. The raw
     values live here and nowhere else - probe_theme knows they stay put, and
     the design-system test forbids a sheet from hand-typing a colour. */
  --c-checker-ground: #ffffff;
  --c-checker-square: #e6e6e8;
  --c-over-line: rgb(255 255 255 / 0.9);
  --c-over-grip: rgb(255 255 255 / 0.92);
  --c-over-glass: rgb(0 0 0 / 0.66);
  --c-over-glass-strong: rgb(0 0 0 / 0.72);
  --c-over-ink: #fff;
  --c-over-shadow: rgb(0 0 0 / 0.35);

  /* Space. Six steps of the system scale (4/8/12/16/24/32). */
  --s-1: var(--oz-space-1);
  --s-2: var(--oz-space-3);
  --s-3: var(--oz-space-4);
  --s-4: var(--oz-space-5);
  --s-5: var(--oz-space-7);
  --s-6: var(--oz-space-9);

  --radius: var(--oz-radius-3);

  /* The floor a finger can actually hit. Applied to every control wherever
     the pointer is coarse or the layout is one-handed. */
  --s-target: var(--oz-target-min);

  /* Two stacks: Geist for the interface, Geist Mono for figures - tabular
     digits so a column of sizes lines up and stops jittering as it counts. */
  --font-ui: var(--oz-font-body);
  --font-num: var(--oz-font-mono);

  /* Interaction states, straight off the system ramps. Hover and press are
     colour steps, never invented tints. */
  --c-raised-hover: var(--oz-color-fill-elevated-hover);
  --c-raised-active: var(--oz-color-fill-elevated-active);
  --c-accent-hover: var(--oz-color-fill-brand-hover);
  --c-accent-active: var(--oz-color-fill-brand-active);
  --c-selected: var(--oz-color-fill-selected);
  --c-border-selected: var(--oz-color-border-selected);
  --c-line-hover: var(--oz-color-border-secondary-hover);

  /* Depth. Three rungs of the system's elevation scale: resting control,
     floating bar, overlay. */
  --elev-1: var(--oz-elevation-x-small);
  --elev-2: var(--oz-elevation-medium);
  --elev-3: var(--oz-elevation-large);

  /* Motion. Effects springs for colour and depth, spatial springs for
     anything that moves - and all spatial travel multiplied by the system's
     reduced-motion scale, so the preference collapses movement here without
     this app doing anything. */
  --dur-fx: var(--oz-spring-effects-fast-ms);
  --ease-fx: var(--oz-spring-effects-fast);
  --dur-move: var(--oz-spring-spatial-fast-ms);
  --ease-move: var(--oz-spring-spatial-fast);
  --motion-scale: var(--oz-motion-spatial-scale);

  /* The overlay recipe behind the one dialog. */
  --overlay-dim: var(--oz-overlay-dimness);
  --overlay-blur: var(--oz-overlay-blur);

  /* Extra radius rungs: cards and overlays sit a step softer than controls. */
  --radius-sm: var(--oz-radius-2);
  --radius-lg: var(--oz-radius-6);

  /* Glyphs painted from CSS (Lucide, ISC - see vendor/LICENSES.md). A metal
     grey that reads on both grounds, so one data URI serves both themes
     without a wrapper element per control. */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898f98' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5'/%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3C/svg%3E");
  --icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

/* 16px base, and nothing anywhere below 13px. The old 14px base cascaded down
   to 11px in the corners, which is reading-glasses territory on a laptop. */
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 16px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Figures, wherever they appear. Tabular so widths do not shift mid-count. */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-size: 1rem; font-weight: 600; }

/* The faces are cut to wght 400..600 and nothing in this interface renders
   heavier. The user agent styles these at `bold` (700), which would synthesise
   a weight the face does not carry. */
b, strong, th { font-weight: 600; }

/* Section labels. Small and quiet: the data is the content, not its name.
   13px is the floor for uppercase micro-labels, and this is the floor. */
h2, h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

p { margin: 0; }

img, canvas { max-width: 100%; }

kbd {
  font: 13px var(--font-num);
  padding: 1px var(--s-1);
  border: 1px solid var(--c-line);
  border-radius: 3px;
  color: var(--c-ink-3);
}

/* One focus treatment for everything, and it is never removed. The ring
   colour is the system's own focus token, gated for contrast on both
   grounds - the accent is a fill colour and is not. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* Reachable by keyboard, out of the way otherwise. */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--c-raised);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  z-index: 10;
}
.skip:focus { left: var(--s-2); }

.muted { color: var(--c-ink-3); }
.spacer { flex: 1; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Someone asked their OS for more contrast: the quiet inks step up one rung
   and the hairlines darken. The ramp is the system's own, so both themes
   stay coherent. */
@media (prefers-contrast: more) {
  :root {
    --c-line: var(--oz-color-border-tertiary);
    --c-ink-2: var(--oz-color-content-primary);
    --c-ink-3: var(--oz-color-content-secondary);
  }
}