/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-orange: #FF5A1F;
  --primitive-color-orange-deep: #E24A12;
  --primitive-color-black: #111111;
  --primitive-color-pure-black: #000000;
  --primitive-color-cream: #F5EEDC;
  --primitive-color-cream-dark: #E7DEC6;
  --primitive-color-white: #FFFFFF;
  --primitive-color-graphite: #7C7A73;
  --primitive-color-graphite-light: #B9B6AC;
  --primitive-color-paper: #F7F6F1;
  --primitive-color-paper-shade: #ECEAE2;
  --primitive-color-grid: #DAD8CF;
  --primitive-color-gold: #FFC400;
  --primitive-color-gold-light: #FFE58A;
  --primitive-color-gold-rim: #B8860B;
  --primitive-color-water: #DCE4E8;
  --primitive-color-park: #E6EBDD;
  --primitive-font-display: 'Londrina Solid', Impact, sans-serif;
  --primitive-font-outline: 'Londrina Outline', 'Londrina Solid', Impact, sans-serif;
  --primitive-font-sketch: 'Londrina Sketch', 'Londrina Solid', Impact, sans-serif;
  --primitive-font-hand: 'Caveat', 'Segoe Print', cursive;
  --primitive-font-body: 'Archivo', 'Inter', system-ui, sans-serif;
  --primitive-fontSize-xs: 12px;
  --primitive-fontSize-sm: 14px;
  --primitive-fontSize-base: 17px;
  --primitive-fontSize-lg: 20px;
  --primitive-fontSize-note: 24px;
  --primitive-fontSize-h3: clamp(32px, 4.4vw, 56px);
  --primitive-fontSize-h2: clamp(52px, 9vw, 132px);
  --primitive-fontSize-h1: clamp(64px, 15vw, 230px);
  --primitive-fontSize-scenery: clamp(120px, 34vw, 520px);
  --primitive-spacing-section: clamp(72px, 10vw, 140px);
  --primitive-stroke-thin: 2px;
  --primitive-stroke-ink: 3px;
  --primitive-stroke-marker: 5px;
  --primitive-stroke-scribble: 14px;
  --primitive-radius-rough: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --primitive-radius-rough-2: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --primitive-radius-blob: 47% 53% 49% 51% / 52% 48% 52% 48%;
  --primitive-radius-pill: 999px;
  --primitive-shadow-coin: inset 0 0 0 2px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.28);
  --primitive-shadow-card: 0 24px 60px rgba(0,0,0,.35);
  --primitive-shadow-offset: 4px 4px 0 #111111;
  --primitive-opacity-scribble: 0.1;
  --primitive-opacity-scenery: 0.32;
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 300ms;
  --primitive-duration-slow: 800ms;
  --primitive-easing-spring: cubic-bezier(.2,.9,.2,1.25);
  --primitive-easing-bounce: cubic-bezier(.34,1.56,.64,1);
  --primitive-easing-out: cubic-bezier(.2,.9,.2,1);
  --primitive-easing-fall: cubic-bezier(.5,0,.9,.4);
}

/* === SEMANTIC === */
:root {
  --color-flat-orange: #FF5A1F;
  --color-flat-black: #111111;
  --color-flat-cream: #F5EEDC;
  --color-bg: #FF5A1F;
  --color-ink: #111111;
  --color-text: #111111;
  --color-text-on-black: #F5EEDC;
  --color-display-on-orange: #F5EEDC;
  --color-text-muted: #7C7A73;
  --color-note-on-orange: #111111;
  --color-note-on-black: #FF5A1F;
  --color-note-on-cream: #7C7A73;
  --color-surface: #F5EEDC;
  --color-surface-white: #FFFFFF;
  --color-line: #111111;
  --color-line-on-black: #F5EEDC;
  --color-accent: #FF5A1F;
  --color-accent-strong: #E24A12;
  --color-coin: #FFC400;
  --color-coin-light: #FFE58A;
  --color-coin-rim: #B8860B;
  --color-paper: #F7F6F1;
  --color-grid: #DAD8CF;
  --color-map-water: #DCE4E8;
  --color-map-park: #E6EBDD;
  --typography-font-display: 'Londrina Solid', Impact, sans-serif;
  --typography-font-outline: 'Londrina Outline', 'Londrina Solid', Impact, sans-serif;
  --typography-font-sketch: 'Londrina Sketch', 'Londrina Solid', Impact, sans-serif;
  --typography-font-hand: 'Caveat', 'Segoe Print', cursive;
  --typography-font-body: 'Archivo', 'Inter', system-ui, sans-serif;
  --typography-size-h1: clamp(64px, 15vw, 230px);
  --typography-size-h2: clamp(52px, 9vw, 132px);
  --typography-size-h3: clamp(32px, 4.4vw, 56px);
  --typography-size-scenery: clamp(120px, 34vw, 520px);
  --typography-size-note: 24px;
  --typography-size-body: 17px;
  --typography-size-small: 14px;
  --stroke-thin: 2px;
  --stroke-ink: 3px;
  --stroke-marker: 5px;
  --stroke-scribble: 14px;
  --radius-rough: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --radius-rough-2: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --radius-blob: 47% 53% 49% 51% / 52% 48% 52% 48%;
  --radius-pill: 999px;
  --opacity-scribble: 0.1;
  --opacity-scenery: 0.32;
  --motion-spring: cubic-bezier(.2,.9,.2,1.25);
  --motion-bounce: cubic-bezier(.34,1.56,.64,1);
  --motion-out: cubic-bezier(.2,.9,.2,1);
  --motion-fall: cubic-bezier(.5,0,.9,.4);
  --motion-fast: 150ms;
  --motion-normal: 300ms;
  --motion-slow: 800ms;
  --space-section: clamp(72px, 10vw, 140px);
}

/* === COMPONENTS === */
:root {
  --bubble-bg: #F5EEDC;
  --bubble-bg-hot: #FF5A1F;
  --bubble-text: #111111;
  --bubble-border: 3px;
  --bubble-radius: 999px;
  --bubble-shadow: 4px 4px 0 #111111;
  --pill-bg: #F5EEDC;
  --pill-text: #111111;
  --pill-border: 2px;
  --card-bg: #F5EEDC;
  --card-ink-bg: #111111;
  --card-ink-text: #F5EEDC;
  --card-border: 3px;
  --card-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --card-shadow: 0 24px 60px rgba(0,0,0,.35);
  --sticker-bg: #F5EEDC;
  --sticker-bg-alt: #FF5A1F;
  --sticker-bg-gold: #FFC400;
  --sticker-text: #111111;
  --coin-face: #FFFFFF;
  --coin-gold: #FFC400;
  --coin-gold-light: #FFE58A;
  --coin-rim: #B8860B;
  --coin-tag-bg: #111111;
  --coin-tag-text: #FFFFFF;
  --coin-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.28);
  --hole-fill: #000000;
  --hole-ring: #FF5A1F;
  --hole-ring-on-orange: #F5EEDC;
  --hole-eye: #FFFFFF;
  --hole-pupil: #000000;
  --hud-bg: #F5EEDC;
  --hud-border: 3px;
  --hud-text: #111111;
  --hud-muted: #7C7A73;
  --map-bg: #F7F6F1;
  --map-residential: #ECEAE2;
  --map-building: #ECEAE2;
  --map-road-minor: #B9B6AC;
  --map-road-major: #7C7A73;
  --map-water: #DCE4E8;
  --map-park: #E6EBDD;
  --map-edible: #FF5A1F;
  --map-too-big: #B9B6AC;
  --map-trail: #7C7A73;
}