/* GENERATED by scripts/build_tokens.py from /workspace/pokemon-collection-shared/brand/tokens.json - do not edit by hand */
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin.var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
:root {
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-display-size: 3.5rem;
  --t-display-line: 1.04;
  --t-display-track: -0.02em;
  --t-display-weight: 700;
  --t-h1-size: 2.5rem;
  --t-h1-line: 1.08;
  --t-h1-track: -0.02em;
  --t-h1-weight: 700;
  --t-h2-size: 1.75rem;
  --t-h2-line: 1.15;
  --t-h2-track: -0.015em;
  --t-h2-weight: 650;
  --t-h3-size: 1.25rem;
  --t-h3-line: 1.3;
  --t-h3-track: -0.01em;
  --t-h3-weight: 600;
  --t-body-lg-size: 1.125rem;
  --t-body-lg-line: 1.55;
  --t-body-lg-track: 0em;
  --t-body-lg-weight: 400;
  --t-body-size: 1rem;
  --t-body-line: 1.55;
  --t-body-track: 0em;
  --t-body-weight: 400;
  --t-small-size: 0.875rem;
  --t-small-line: 1.5;
  --t-small-track: 0em;
  --t-small-weight: 400;
  --t-caption-size: 0.75rem;
  --t-caption-line: 1.4;
  --t-caption-track: 0.01em;
  --t-caption-weight: 500;
  --t-overline-case: uppercase;
  --t-overline-size: 0.75rem;
  --t-overline-line: 1.3;
  --t-overline-track: 0.12em;
  --t-overline-weight: 600;
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-2: 0 18px 40px -16px rgba(17,17,17,0.22), 0 2px 6px rgba(17,17,17,0.06);
  --touch: 44px;
  --max-w: 1120px;
  --gutter: 24px;
  --m-instant: 0ms;
  --m-fast: 200ms;
  --m-base: 350ms;
  --m-slow: 600ms;
  --m-reveal: 800ms;
  --m-wipe: 1000ms;
  --ease-standard: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-emphasized: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;
  --reveal-d: 24px;
  --reveal-d-sm: 16px;
  --stagger: 80ms;
  --shimmer: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,236,170,0.28) 45%, rgba(255,255,255,0.55) 50%, rgba(190,225,255,0.26) 55%, rgba(255,255,255,0) 70%);
  --shimmer-dur: 900ms;
  --shimmer-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}
:root, [data-theme="light"] {
  --c-bg: #FAFAF9;
  --c-surface: #FFFFFF;
  --c-raised: #FFFFFF;
  --c-border: #E4E2DE;
  --c-divider: #EEECE9;
  --c-text: #111111;
  --c-text-2: #57534E;
  --c-text-3: #6F6A64;
  --c-accent: #FFC21A;
  --c-on-accent: #111111;
  --c-accent-ink: #8A5A00;
  --c-accent-soft: #FFF4D1;
  --c-focus: #8A5A00;
  --c-signal-up: #15803D;
  --c-signal-down: #B91C1C;
  --c-signal-hold: #57534E;
  --c-signal-warn: #9A5B00;
  --c-theme-color: #FAFAF9;
  --c-logo-gold-text: #B98300;
}
[data-theme="dark"] {
  --c-bg: #0B0B0C;
  --c-surface: #141416;
  --c-raised: #1C1C1F;
  --c-border: #2C2C31;
  --c-divider: #232327;
  --c-text: #F5F5F4;
  --c-text-2: #B4B0AB;
  --c-text-3: #8E8A85;
  --c-accent: #FFC21A;
  --c-on-accent: #111111;
  --c-accent-ink: #FFCF4D;
  --c-accent-soft: #2A2210;
  --c-focus: #FFCF4D;
  --c-signal-up: #4ADE80;
  --c-signal-down: #F87171;
  --c-signal-hold: #B4B0AB;
  --c-signal-warn: #FBBF24;
  --c-theme-color: #0B0B0C;
  --c-logo-gold-text: #FFC21A;
}
[data-theme="dark"] { --shadow-1: 0 1px 2px rgba(0,0,0,0.5); --shadow-2: 0 18px 40px -16px rgba(0,0,0,0.7), 0 0 0 1px #2C2C31; }
[data-theme="storm"] {
  --c-bg: #0B0D10;
  --c-surface: #14181D;
  --c-raised: #1B2027;
  --c-border: #2A313A;
  --c-divider: #1D232A;
  --c-text: #F2F4F5;
  --c-text-2: #AEB6BF;
  --c-text-3: #8C959F;
  --c-accent: #FFC21A;
  --c-on-accent: #111111;
  --c-accent-ink: #FFCF4D;
  --c-accent-soft: #2A2210;
  --c-focus: #FFCF4D;
  --c-signal-up: #4ADE80;
  --c-signal-down: #F87171;
  --c-signal-hold: #AEB6BF;
  --c-signal-warn: #FBBF24;
  --c-theme-color: #0B0D10;
  --c-bolt: #EAF4FF;
  --c-bolt-glow: #9FD3FF;
  --c-cloud: #1A2028;
  --c-vignette: #050608;
  --c-logo-gold-text: #FFC21A;
}
[data-theme="storm"] { --shadow-1: 0 1px 2px rgba(0,0,0,0.5); --shadow-2: 0 18px 40px -16px rgba(0,0,0,0.7), 0 0 0 1px #2C2C31; }
:root { color-scheme: light; } [data-theme="dark"], [data-theme="storm"] { color-scheme: dark; }
@media (max-width: 640px) { :root { --t-display-size: 2.5rem; --t-h1-size: 2rem; --t-h2-size: 1.5rem; } }