/* Pikola design tokens. Generated by `pnpm brand:tokens` from packages/brand/tokens/*.json: edit the JSON, not this file.
 *
 * Primitives are --pk-<family>-<step>. Everything a stylesheet should use is
 * a semantic name: --bg, --surface, --text, --accent, --go, --stop, … The light
 * theme is the default; dark follows the system unless data-theme says otherwise.
 */
:root {
  --pk-pickle-50: #F4FAE4;
  --pk-pickle-100: #E7F5C3;
  --pk-pickle-200: #D2EC92;
  --pk-pickle-300: #B9E05A;
  --pk-pickle-400: #9ED32A;
  --pk-pickle-500: #6FAE4A;
  --pk-pickle-600: #4C7A2A;
  --pk-pickle-700: #3A6121;
  --pk-pickle-800: #27461A;
  --pk-pickle-900: #16300E;
  --pk-brine-50: #FCFAF4;
  --pk-brine-100: #F7F2E6;
  --pk-brine-200: #EFE7D3;
  --pk-brine-300: #E3D8BC;
  --pk-brine-400: #CFC2A0;
  --pk-brine-500: #B3A47E;
  --pk-ink-50: #F3F4F0;
  --pk-ink-100: #E4E7DF;
  --pk-ink-200: #C3C8BB;
  --pk-ink-300: #979E8F;
  --pk-ink-400: #5F665A;
  --pk-ink-500: #454B3F;
  --pk-ink-600: #363B30;
  --pk-ink-700: #262A22;
  --pk-ink-800: #1B1E18;
  --pk-ink-900: #121410;
  --pk-coral-100: #FFE4DE;
  --pk-coral-300: #FFA594;
  --pk-coral-500: #FF5C47;
  --pk-coral-700: #C8382A;
  --pk-chalk-100: #DDE7FF;
  --pk-chalk-300: #7EA6FF;
  --pk-chalk-500: #2F5FD8;
  --pk-chalk-700: #1E44A8;
  --pk-signal-100: #DDF3E6;
  --pk-signal-300: #3DD17F;
  --pk-signal-500: #15804A;
  --pk-signal-700: #0F6436;
  --pk-amber-100: #FBEFD0;
  --pk-amber-300: #F5B82E;
  --pk-amber-500: #C98A12;
  --pk-amber-700: #8A5A05;
  --pk-danger-100: #F9DEDB;
  --pk-danger-300: #FF6B5E;
  --pk-danger-500: #C9342B;
  --pk-danger-700: #8F1F18;
  --pk-marker-300: #FFE14D;
  --pk-white: #FFFFFF;
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-brand: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-sticker: 3px;
  --r-control: 6px;
  --r-card: 10px;
  --r-band: 0px;
  --gutter: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 320ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --pickle: #6FAE4A;
  --pickle-ink: #27461A;
  --acid: #9ED32A;
  --acid-ink: #121410;
  --coral: #FF5C47;
  --coral-ink: #121410;
  --marker: #FFE14D;
  --bg: #F7F2E6;
  --surface: #FCFAF4;
  --surface-2: #EFE7D3;
  --surface-ink: #121410;
  --text-on-ink: #F3F4F0;
  --line: rgba(18, 20, 16, 0.14);
  --line-strong: rgba(18, 20, 16, 0.50);
  --rule: #121410;
  --text: #121410;
  --dim: #454B3F;
  --faint: #5F665A;
  --brand-tint: #E7F5C3;
  --accent: #3A6121;
  --accent-hover: #27461A;
  --accent-ink: #FFFFFF;
  --accent-tint: #E7F5C3;
  --go: #15804A;
  --go-ink: #FFFFFF;
  --go-tint: #DDF3E6;
  --go-text: #0F6436;
  --careful: #F5B82E;
  --careful-ink: #121410;
  --careful-tint: #FBEFD0;
  --careful-text: #8A5A05;
  --stop: #C9342B;
  --stop-ink: #FFFFFF;
  --stop-tint: #F9DEDB;
  --stop-text: #8F1F18;
  --lead: #2F5FD8;
  --lead-ink: #FFFFFF;
  --lead-tint: #DDE7FF;
  --lead-text: #1E44A8;
  --focus: #3A6121;
  --selection: rgba(158, 211, 42, 0.45);
  --shadow-card: 0 1px 0 rgba(18, 20, 16, 0.05), 0 10px 24px -18px rgba(18, 20, 16, 0.35);
  --shadow-pop: 0 2px 0 rgba(18, 20, 16, 0.08), 0 18px 40px -16px rgba(18, 20, 16, 0.45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121410;
    --surface: #1B1E18;
    --surface-2: #262A22;
    --surface-ink: #F7F2E6;
    --text-on-ink: #121410;
    --line: rgba(243, 244, 240, 0.12);
    --line-strong: rgba(243, 244, 240, 0.40);
    --rule: #F3F4F0;
    --text: #F3F4F0;
    --dim: #C3C8BB;
    --faint: #979E8F;
    --brand-tint: rgba(158, 211, 42, 0.14);
    --accent: #B9E05A;
    --accent-hover: #D2EC92;
    --accent-ink: #121410;
    --accent-tint: rgba(185, 224, 90, 0.16);
    --go: #3DD17F;
    --go-ink: #121410;
    --go-tint: rgba(61, 209, 127, 0.16);
    --go-text: #5FDB94;
    --careful: #F5B82E;
    --careful-ink: #121410;
    --careful-tint: rgba(245, 184, 46, 0.16);
    --careful-text: #F5B82E;
    --stop: #FF6B5E;
    --stop-ink: #121410;
    --stop-tint: rgba(255, 107, 94, 0.16);
    --stop-text: #FF8A80;
    --lead: #7EA6FF;
    --lead-ink: #121410;
    --lead-tint: rgba(126, 166, 255, 0.16);
    --lead-text: #9DBBFF;
    --focus: #B9E05A;
    --selection: rgba(185, 224, 90, 0.35);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 10px 24px -18px rgba(0, 0, 0, 0.7);
    --shadow-pop: 0 2px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #121410;
  --surface: #1B1E18;
  --surface-2: #262A22;
  --surface-ink: #F7F2E6;
  --text-on-ink: #121410;
  --line: rgba(243, 244, 240, 0.12);
  --line-strong: rgba(243, 244, 240, 0.40);
  --rule: #F3F4F0;
  --text: #F3F4F0;
  --dim: #C3C8BB;
  --faint: #979E8F;
  --brand-tint: rgba(158, 211, 42, 0.14);
  --accent: #B9E05A;
  --accent-hover: #D2EC92;
  --accent-ink: #121410;
  --accent-tint: rgba(185, 224, 90, 0.16);
  --go: #3DD17F;
  --go-ink: #121410;
  --go-tint: rgba(61, 209, 127, 0.16);
  --go-text: #5FDB94;
  --careful: #F5B82E;
  --careful-ink: #121410;
  --careful-tint: rgba(245, 184, 46, 0.16);
  --careful-text: #F5B82E;
  --stop: #FF6B5E;
  --stop-ink: #121410;
  --stop-tint: rgba(255, 107, 94, 0.16);
  --stop-text: #FF8A80;
  --lead: #7EA6FF;
  --lead-ink: #121410;
  --lead-tint: rgba(126, 166, 255, 0.16);
  --lead-text: #9DBBFF;
  --focus: #B9E05A;
  --selection: rgba(185, 224, 90, 0.35);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 10px 24px -18px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 2px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}