/* GENERATED FILE. Do not edit by hand.
 * Source: design/design-tokens.json (version 0.6).
 * Regenerate: dart run lokarium_tools:generate_web_css */

:root {
  color-scheme: light dark;
  --color-bg: #FFFFFF;
  --color-surface: #F1F4F9;
  --color-surface2: #E7ECF4;
  --color-sidebar: #FFFFFF;
  --color-sidebar-text: #4A5368;
  --color-text: #121826;
  --color-text-muted: #4A5368;
  --color-border: #D8DEE9;
  --color-accent: #3C59B1;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #E1E8FA;
  --color-accent-ink: #2D4797;
  --color-cta: #EA8B34;
  --color-on-cta: #1E1205;
  --color-input-bg: #FFFFFF;
  --color-photo-area: #FFFFFF;
  --color-warn-soft: #FCEEDD;
  --color-warn-ink: #7F4309;
  --color-danger: #B42318;
  --brand-blue: #3C59B1;
  --brand-orange: #EA8B34;
  --brand-blue-on-dark: #7E9AF0;
  --radius-input: 8px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-photo: 14px;
  --radius-chip: 16px;
  --radius-pill: 20px;
  --radius-item: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --size-touch-target: 44px;
  --size-input-height: 46px;
  --size-input-height-dense: 36px;
  --size-button-height: 46px;
  --size-button-height-dense: 36px;
  --size-header-button-height: 40px;
  --size-chip-height: 32px;
  --size-rail-width: 84px;
  --size-rail-item-width: 68px;
  --size-max-content-width: 1180px;
  --layout-section-gap: 12px;
  --layout-grid-card-min-s: 150px;
  --layout-grid-card-min-m: 190px;
  --layout-grid-card-min-l: 240px;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-display-size: 40px;
  --text-display-weight: 600;
  --text-display-tracking: -0.02em;
  --text-h1-size: 38px;
  --text-h1-weight: 600;
  --text-h1-tracking: -0.02em;
  --text-h2-size: 24px;
  --text-h2-weight: 600;
  --text-h2-tracking: -0.01em;
  --text-section-title-size: 16px;
  --text-section-title-weight: 700;
  --text-section-title-tracking: 0em;
  --text-group-label-size: 13px;
  --text-group-label-weight: 700;
  --text-group-label-tracking: 0.1em;
  --text-body-size: 15px;
  --text-body-weight: 400;
  --text-body-tracking: 0em;
  --text-body-strong-size: 15px;
  --text-body-strong-weight: 600;
  --text-body-strong-tracking: 0em;
  --text-label-size: 13px;
  --text-label-weight: 500;
  --text-label-tracking: 0em;
  --text-caption-size: 12px;
  --text-caption-weight: 500;
  --text-caption-tracking: 0em;
  --text-fact-value-size: 18px;
  --text-fact-value-weight: 600;
  --text-fact-value-tracking: 0em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0B0E14;
    --color-surface: #141924;
    --color-surface2: #1A2030;
    --color-sidebar: #080A0F;
    --color-sidebar-text: #8F99AE;
    --color-text: #E8ECF4;
    --color-text-muted: #9AA3B5;
    --color-border: #262E3F;
    --color-accent: #5574D1;
    --color-on-accent: #FFFFFF;
    --color-accent-soft: #1B2546;
    --color-accent-ink: #A3B6F4;
    --color-cta: #EA8B34;
    --color-on-cta: #1E1205;
    --color-input-bg: #0F131C;
    --color-photo-area: #1C2232;
    --color-warn-soft: #3A2913;
    --color-warn-ink: #F4BB7E;
    --color-danger: #F59A92;
  }
}