/* GENERATED FILE — DO NOT EDIT.
 *
 * Produced by website/gen-tokens.py from design/tokens.json, the suite's single
 * source of design values. Hand edits are reverted by the next run and never
 * reach Konnekt or Kommands, which derive their tokens from the same source.
 *
 * To change a value: edit design/tokens.json, then run ./website/gen-tokens.py.
 * A value that is not in the source is a token to add there, not a literal to
 * inline in styles.css.
 */

:root {
  /* Colours, dark theme. Status colours are emitted as a channel triplet
     and a composed value, so alpha varies from one token:
     rgb(var(--accent-rgb) / 0.3) needs no second --accent-30 token. */
  --bg-base: #05060a;
  --bg-elevated: rgba(18, 20, 30, 0.82);
  --bg-overlay: #10111a;
  --bg-surface: rgba(255, 255, 255, 0.025);
  --hover-surface: rgba(255, 255, 255, 0.05);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-faint: rgba(255, 255, 255, 0.25);
  --accent-rgb: 74 222 128;
  --accent: rgb(var(--accent-rgb));
  --success-rgb: 34 197 94;
  --success: rgb(var(--success-rgb));
  --warning-rgb: 245 158 11;
  --warning: rgb(var(--warning-rgb));
  --danger-rgb: 248 113 113;
  --danger: rgb(var(--danger-rgb));
  --sun-rgb: 255 216 77;
  --sun: rgb(var(--sun-rgb));

  /* Type. The size scale is the app UI's — 12px body — so the site's own
     display sizes are page vocabulary in styles.css, not tokens. */
  --font-sans: 'Ranade', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
  --font-title: 'Excon', var(--font-sans);
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', 'Segoe UI Mono', 'Consolas', 'Liberation Mono', monospace;
  --font-display: 'Satoshi', var(--font-sans);
  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-1xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-lg: 18px;
  --text-xl: 20px;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 900;

  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-panel: 10px;
  --radius-xl: 12px;
  --radius-pill: 9999px;

  --border-hairline: 0.5px;
  --border-thick: 1.5px;

  --duration-fast: 150ms;
  --duration-panel: 280ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}