/* Sansoif design system tokens, generated from docs/design-system/tokens.json by
   `bin/rails design_system:tokens`. Do not edit by hand. */

:root, [data-theme="light"] {
  --cream: #fff3df;
  --paper: #fff8e8;
  --white: #fffdf6;
  --sand: #f8e4c7;
  --line: #e4d6c2;
  --line-soft: #efe3d0;
  --charcoal: #25211d;
  --charcoal-80: #423b33;
  --muted: #665e54;
  --muted-soft: #978c7d;
  --night: #1c1711;
  --night-card: #2d261c;
  --paprika: #e85d2a;
  --paprika-dark: #b23f14;
  --paprika-darker: #9a3510;
  --paprika-light: #f27545;
  --paprika-soft: #f6c9b2;
  --paprika-tint: #fbe5d8;
  --mustard: #f2b84b;
  --mustard-dark: #d99b2e;
  --mustard-soft: #fbe6bc;
  --olive: #677447;
  --olive-dark: #4e5a35;
  --moss: #3e4a2f;
  --olive-soft: #dde0cb;
  --bg: var(--paper);
  --bg-tint: var(--cream);
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand);
  --surface-hover: #f6ead6;
  --surface-inverse: var(--charcoal);
  --ink: var(--charcoal);
  --ink-body: var(--charcoal-80);
  --ink-muted: var(--muted);
  --ink-faint: #857a6b;
  --ink-inverse: var(--paper);
  --ink-inverse-muted: #c9bda9;
  --ink-accent: var(--paprika-dark);
  --border: var(--line);
  --border-soft: var(--line-soft);
  --border-control: #857a6b;
  --border-strong: var(--charcoal);
  --border-inverse: rgba(255, 248, 232, 0.2);
  --action: var(--paprika-dark);
  --action-hover: var(--paprika-darker);
  --action-press: #7c2b0d;
  --on-action: var(--paper);
  --action-soft: var(--paprika-tint);
  --action-soft-ink: var(--paprika-darker);
  --contrast: var(--charcoal);
  --contrast-hover: #100e0c;
  --on-contrast: var(--paper);
  --brand: var(--paprika);
  --on-brand: var(--paper);
  --accent: var(--mustard);
  --on-accent: var(--charcoal);
  --focus-ring: var(--charcoal);
  --focus-ring-inverse: var(--mustard);
  --focus-halo: var(--mustard);
  --overlay: rgba(28, 23, 17, 0.55);
  --success: #5f7a3e;
  --success-ink: #465a2c;
  --success-soft: #e8edd6;
  --success-border: #b9c49a;
  --warning: #b07a12;
  --warning-ink: #7a540b;
  --warning-soft: #fbecc8;
  --warning-border: #ebc77e;
  --danger: #b8321f;
  --danger-ink: #952414;
  --danger-soft: #f8dcd3;
  --danger-border: #e9ab9b;
  --info: #6b6359;
  --info-ink: #463f37;
  --info-soft: #efe5d4;
  --info-border: #d6c6ae;
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-grid: rgba(38, 33, 28, 0.1);
  --avatar-1: #b33626;
  --avatar-2: #597840;
  --avatar-3: #3d4a2e;
  --avatar-4: #c78c1f;
  --avatar-5: #6e6154;
  --avatar-6: #576ead;
  --avatar-7: #613d6b;
  --shadow-xs: 0 1px 2px rgba(37, 33, 29, 0.08);
  --shadow-sm: 0 4px 14px rgba(37, 33, 29, 0.1);
  --shadow-md: 0 14px 34px rgba(37, 33, 29, 0.14);
  --shadow-lg: 0 24px 60px rgba(37, 33, 29, 0.18);
  --shadow-mascot: 0 30px 65px rgba(37, 33, 29, 0.24);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --container: 1120px;
  --container-text: 720px;
  --sidebar: 264px;
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}

[data-theme="dark"], .dark {
  --bg: var(--night);
  --bg-tint: #221c15;
  --surface: var(--night-card);
  --surface-raised: #3a3229;
  --surface-sunken: #15110c;
  --surface-hover: #352d23;
  --surface-inverse: #110e0a;
  --ink: var(--cream);
  --ink-body: #e9dcc8;
  --ink-muted: #b9ac97;
  --ink-faint: #978b77;
  --ink-inverse: var(--paper);
  --ink-inverse-muted: #b9ac97;
  --ink-accent: #f59a74;
  --border: #463f37;
  --border-soft: #352d23;
  --border-control: #8f836f;
  --border-strong: #e9dcc8;
  --border-inverse: rgba(255, 248, 232, 0.14);
  --action: var(--paprika-light);
  --action-hover: #f59a74;
  --action-press: #f6b496;
  --on-action: var(--night);
  --action-soft: rgba(242, 117, 69, 0.16);
  --action-soft-ink: #f6b496;
  --contrast: var(--cream);
  --contrast-hover: #ffffff;
  --on-contrast: var(--night);
  --brand: var(--paprika);
  --on-brand: var(--paper);
  --accent: var(--mustard);
  --on-accent: var(--charcoal);
  --focus-ring: var(--mustard);
  --focus-ring-inverse: var(--mustard);
  --focus-halo: rgba(242, 184, 75, 0.35);
  --overlay: rgba(8, 6, 4, 0.7);
  --success: #9db36e;
  --success-ink: #b9cc8c;
  --success-soft: rgba(157, 179, 110, 0.16);
  --success-border: rgba(157, 179, 110, 0.35);
  --warning: #f2b84b;
  --warning-ink: #f6cd7a;
  --warning-soft: rgba(242, 184, 75, 0.14);
  --warning-border: rgba(242, 184, 75, 0.35);
  --danger: #f0735c;
  --danger-ink: #f6a090;
  --danger-soft: rgba(240, 115, 92, 0.15);
  --danger-border: rgba(240, 115, 92, 0.38);
  --info: #b3a792;
  --info-ink: #d6c6ae;
  --info-soft: rgba(214, 198, 174, 0.12);
  --info-border: rgba(214, 198, 174, 0.3);
  --chart-1: #3987e5;
  --chart-2: #d95926;
  --chart-3: #199e70;
  --chart-grid: rgba(252, 244, 226, 0.1);
  --avatar-1: #b33626;
  --avatar-2: #597840;
  --avatar-3: #3d4a2e;
  --avatar-4: #c78c1f;
  --avatar-5: #6e6154;
  --avatar-6: #576ead;
  --avatar-7: #613d6b;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-mascot: 0 30px 65px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: var(--night);
    --bg-tint: #221c15;
    --surface: var(--night-card);
    --surface-raised: #3a3229;
    --surface-sunken: #15110c;
    --surface-hover: #352d23;
    --surface-inverse: #110e0a;
    --ink: var(--cream);
    --ink-body: #e9dcc8;
    --ink-muted: #b9ac97;
    --ink-faint: #978b77;
    --ink-inverse: var(--paper);
    --ink-inverse-muted: #b9ac97;
    --ink-accent: #f59a74;
    --border: #463f37;
    --border-soft: #352d23;
    --border-control: #8f836f;
    --border-strong: #e9dcc8;
    --border-inverse: rgba(255, 248, 232, 0.14);
    --action: var(--paprika-light);
    --action-hover: #f59a74;
    --action-press: #f6b496;
    --on-action: var(--night);
    --action-soft: rgba(242, 117, 69, 0.16);
    --action-soft-ink: #f6b496;
    --contrast: var(--cream);
    --contrast-hover: #ffffff;
    --on-contrast: var(--night);
    --brand: var(--paprika);
    --on-brand: var(--paper);
    --accent: var(--mustard);
    --on-accent: var(--charcoal);
    --focus-ring: var(--mustard);
    --focus-ring-inverse: var(--mustard);
    --focus-halo: rgba(242, 184, 75, 0.35);
    --overlay: rgba(8, 6, 4, 0.7);
    --success: #9db36e;
    --success-ink: #b9cc8c;
    --success-soft: rgba(157, 179, 110, 0.16);
    --success-border: rgba(157, 179, 110, 0.35);
    --warning: #f2b84b;
    --warning-ink: #f6cd7a;
    --warning-soft: rgba(242, 184, 75, 0.14);
    --warning-border: rgba(242, 184, 75, 0.35);
    --danger: #f0735c;
    --danger-ink: #f6a090;
    --danger-soft: rgba(240, 115, 92, 0.15);
    --danger-border: rgba(240, 115, 92, 0.38);
    --info: #b3a792;
    --info-ink: #d6c6ae;
    --info-soft: rgba(214, 198, 174, 0.12);
    --info-border: rgba(214, 198, 174, 0.3);
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-grid: rgba(252, 244, 226, 0.1);
    --avatar-1: #b33626;
    --avatar-2: #597840;
    --avatar-3: #3d4a2e;
    --avatar-4: #c78c1f;
    --avatar-5: #6e6154;
    --avatar-6: #576ead;
    --avatar-7: #613d6b;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-mascot: 0 30px 65px rgba(0, 0, 0, 0.6);
  }
}