/* Generated from design/tokens.json by `python -m panenkam tokens`. Do not edit. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --radius: 22px;
  --radius-sm: 14px;
  --gap: 12px;
  --tap: 58px;
  --tap-sm: 44px;
  --embedded-back: 112px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 28px;
  --type-display-xl: 34px;
  --type-display-l: 28px;
  --type-display-m: 22px;
  --type-display-s: 20px;
  --type-label: 17px;
  --type-label-s: 13px;
  --type-body: 15px;
  --type-body-s: 13px;
  --type-timer: 20px;
  --font-display: "Archivo", sans-serif; /* wide display headings, labels and buttons */
  --font-body: "Geist", sans-serif; /* body and secondary text */
  --font-mono: "JetBrains Mono", monospace; /* clocks, codes and telemetry */
}

:root, [data-theme="dark"] {
  --bg: #0a0d0b; /* Floodlight background: screen background */
  --surface: #151b18; /* Glass fallback: cards and dialogs */
  --surface-2: #1f2722; /* Raised glass fallback: insets and secondary controls */
  --border: #56615b; /* Glass hairline: control and card outlines */
  --text: #eef3ef; /* Primary ink: headings and body text */
  --muted: #a3ada7; /* Secondary ink: supporting copy and telemetry */
  --accent: #c8f051; /* Floodlight lime text: accent text and focus */
  --accent-fill: #c8f051; /* Floodlight lime: primary actions and selected states */
  --on-accent: #0b0f0d; /* Ink on lime: primary action labels */
  --bar: #0a0d0b; /* HUD base: scorebug and action dock */
  --on-bar: #eef3ef; /* HUD ink: primary HUD labels */
  --on-bar-muted: #a3ada7; /* HUD secondary ink: HUD hints and outlines */
  --rec-on-bar: #ff6b5c; /* Recording signal: recording timer and state */
  --ok: #c8f051; /* Ready: passed checks */
  --warn: #ffbf69; /* Warning: advisory state */
  --bad: #ff786b; /* Failure: errors and destructive warnings */
  --rec: #ff6b5c; /* Record red: recording text */
  --rec-fill: #d83327; /* Record red fill: REC tag and end-match ring */
  --on-rec: #ffffff; /* White: text on record red */
  --video-backdrop: #000000; /* Video black: behind camera and playback */
  --on-video: #ffffff; /* Video ink: guides over video */
  --scrim: rgb(6 8 7 / 0.60); /* Modal scrim: behind sheets and overlays */
  --dim: #000000; /* OLED black: recording screen saver */
  --flash-off: #000000; /* Test black: synchronization test */
  --flash-on: #ffffff; /* Test white: synchronization test */
  --offline: #a3ada7; /* Offline: unreachable state */
  --ok-on-surface-2: #c8f051; /* Ready on inset: success on secondary surfaces */
  --warn-on-surface-2: #ffbf69; /* Warning on inset: warning on secondary surfaces */
  --bad-on-surface-2: #ff786b; /* Failure on inset: failure on secondary surfaces */
  --disabled-fill: #2b3530; /* Disabled fill: disabled controls */
  --disabled-ink: #a3ada7; /* Disabled ink: disabled labels */
  --focus-ring: #c8f051; /* Focus lime: focus ring on screens */
  --focus-ring-on-bar: #c8f051; /* Focus lime on HUD: focus ring on overlays */
  --pressed-scrim: rgb(255 255 255 / 0.12); /* Pressed wash: pressed controls */
  --pressed-scrim-on-bar: rgb(255 255 255 / 0.16); /* Pressed HUD wash: pressed overlay controls */
  --glass-surface: rgb(255 255 255 / 0.08); /* Liquid glass: translucent panels */
  --glass-surface-2: rgb(255 255 255 / 0.11); /* Liquid glass inset: segments and inset controls */
  --glass-border: rgb(255 255 255 / 0.16); /* Liquid glass edge: one-pixel glass highlights */
  --sheet: rgb(20 26 22 / 0.84); /* Sheet glass: settings and modal cards */
  --overlay: rgb(18 22 20 / 0.85); /* Camera glass: HUD over camera video */
  --wall-glow-a: rgb(200 240 81 / 0.30); /* Lime glow: wallpaper gradient */
  --wall-glow-b: rgb(61 145 145 / 0.34); /* Cyan glow: wallpaper gradient */
  --wall-glow-c: rgb(39 125 77 / 0.55); /* Pitch glow: wallpaper gradient */
  --shadow: rgb(0 0 0 / 0.28); /* Elevation shadow: glass elevation */
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #eef1ec; /* Floodlight background: screen background */
  --surface: #ffffff; /* Glass fallback: cards and dialogs */
  --surface-2: #e3e8e2; /* Raised glass fallback: insets and secondary controls */
  --border: #7a857d; /* Glass hairline: control and card outlines */
  --text: #0e1411; /* Primary ink: headings and body text */
  --muted: #4f5a53; /* Secondary ink: supporting copy and telemetry */
  --accent: #4a5a1e; /* Floodlight lime text: accent text and focus */
  --accent-fill: #4a5a1e; /* Floodlight lime: primary actions and selected states */
  --on-accent: #ffffff; /* Ink on lime: primary action labels */
  --bar: #ffffff; /* HUD base: scorebug and action dock */
  --on-bar: #0e1411; /* HUD ink: primary HUD labels */
  --on-bar-muted: #4f5a53; /* HUD secondary ink: HUD hints and outlines */
  --rec-on-bar: #cd483c; /* Recording signal: recording timer and state */
  --ok: #38500f; /* Ready: passed checks */
  --warn: #6f4500; /* Warning: advisory state */
  --bad: #9c2118; /* Failure: errors and destructive warnings */
  --rec: #a62017; /* Record red: recording text */
  --rec-fill: #d83327; /* Record red fill: REC tag and end-match ring */
  --on-rec: #ffffff; /* White: text on record red */
  --video-backdrop: #000000; /* Video black: behind camera and playback */
  --on-video: #ffffff; /* Video ink: guides over video */
  --scrim: rgb(0 0 0 / 0.35); /* Modal scrim: behind sheets and overlays */
  --dim: #000000; /* OLED black: recording screen saver */
  --flash-off: #000000; /* Test black: synchronization test */
  --flash-on: #ffffff; /* Test white: synchronization test */
  --offline: #4f5a53; /* Offline: unreachable state */
  --ok-on-surface-2: #38500f; /* Ready on inset: success on secondary surfaces */
  --warn-on-surface-2: #6f4500; /* Warning on inset: warning on secondary surfaces */
  --bad-on-surface-2: #9c2118; /* Failure on inset: failure on secondary surfaces */
  --disabled-fill: #d2d9d2; /* Disabled fill: disabled controls */
  --disabled-ink: #4f5a53; /* Disabled ink: disabled labels */
  --focus-ring: #4a5a1e; /* Focus lime: focus ring on screens */
  --focus-ring-on-bar: #4a5a1e; /* Focus lime on HUD: focus ring on overlays */
  --pressed-scrim: rgb(14 20 17 / 0.08); /* Pressed wash: pressed controls */
  --pressed-scrim-on-bar: rgb(14 20 17 / 0.12); /* Pressed HUD wash: pressed overlay controls */
  --glass-surface: rgb(255 255 255 / 0.55); /* Liquid glass: translucent panels */
  --glass-surface-2: rgb(255 255 255 / 0.40); /* Liquid glass inset: segments and inset controls */
  --glass-border: rgb(255 255 255 / 0.75); /* Liquid glass edge: one-pixel glass highlights */
  --sheet: rgb(246 248 245 / 0.91); /* Sheet glass: settings and modal cards */
  --overlay: rgb(18 22 20 / 0.85); /* Camera glass: HUD over camera video */
  --wall-glow-a: rgb(200 240 81 / 0.55); /* Lime glow: wallpaper gradient */
  --wall-glow-b: rgb(143 207 207 / 0.60); /* Cyan glow: wallpaper gradient */
  --wall-glow-c: rgb(118 189 137 / 0.60); /* Pitch glow: wallpaper gradient */
  --shadow: rgb(30 45 30 / 0.12); /* Elevation shadow: glass elevation */
  color-scheme: light;
}

:root {
  --site-page: 1120px;
  --site-measure: 620px;
  --site-gutter: 20px;
  --site-gutter-wide: 48px;
  --site-hero-min: 46px;
  --site-hero-max: 124px;
  --site-lead-min: 18px;
  --site-lead-max: 23px;
  --site-heading-min: 28px;
  --site-heading-max: 46px;
  --site-section-min: 64px;
  --site-section-max: 128px;
  --site-small: 14px;
  --site-field: 17px;
}