/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless - multiply by 1px in calc() where a length is needed. */

:root {
  --color-buttercup-dark: rgb(194,124,14); /* @kind color */
  --color-buttercup-darker: rgb(97,62,7); /* @kind color */
  --color-buttercup-darkest: rgb(72,46,5); /* @kind color */
  --color-buttercup-light: rgb(246,185,89); /* @kind color */
  --color-buttercup-lighter: rgb(252,235,207); /* @kind color */
  --color-buttercup-lightest: rgb(253,245,231); /* @kind color */
  --color-buttercup: rgb(243,156,18); /* @kind color */
  --color-cinnabar-dark: rgb(184,60,48); /* @kind color */
  --color-cinnabar-darker: rgb(92,30,24); /* @kind color */
  --color-cinnabar-darkest: rgb(69,22,18); /* @kind color */
  --color-cinnabar-light: rgb(238,129,118); /* @kind color */
  --color-cinnabar-lighter: rgb(250,219,216); /* @kind color */
  --color-cinnabar-lightest: rgb(252,237,235); /* @kind color */
  --color-cinnabar: rgb(231,76,60); /* @kind color */
  --color-mountain-meadow-dark: rgb(20,150,124); /* @kind color */
  --color-mountain-meadow-darker: rgb(10,75,62); /* @kind color */
  --color-mountain-meadow-darkest: rgb(7,56,46); /* @kind color */
  --color-mountain-meadow-light: rgb(94,208,185); /* @kind color */
  --color-mountain-meadow-lighter: rgb(209,241,235); /* @kind color */
  --color-mountain-meadow-lightest: rgb(232,248,245); /* @kind color */
  --color-mountain-meadow: rgb(26,188,156); /* @kind color */
  --color-neutral-black: rgb(0,0,0); /* @kind color */
  --color-neutral-dark: rgb(84,82,77); /* @kind color */
  --color-neutral-darker: rgb(36,32,26); /* @kind color */
  --color-neutral-darkest: rgb(12,8,1); /* @kind color */
  --color-neutral-light: rgb(182,180,178); /* @kind color */
  --color-neutral-lighter: rgb(218,217,216); /* @kind color */
  --color-neutral-lightest: rgb(242,242,242); /* @kind color */
  --color-neutral-white: rgb(255,255,255); /* @kind color */
  --color-neutral: rgb(133,131,128); /* @kind color */
  --color-pickled-bluewood-dark: rgb(35,49,64); /* @kind color */
  --color-pickled-bluewood-darker: rgb(17,24,32); /* @kind color */
  --color-pickled-bluewood-darkest: rgb(13,18,24); /* @kind color */
  --color-pickled-bluewood-light: rgb(107,119,132); /* @kind color */
  --color-pickled-bluewood-lighter: rgb(212,216,220); /* @kind color */
  --color-pickled-bluewood-lightest: rgb(233,235,237); /* @kind color */
  --color-pickled-bluewood: rgb(44,62,80); /* @kind color */
  --color-scheme-1-accent: var(--color-white); /* @kind color */
  --color-scheme-1-background-2: var(--color-white-2); /* @kind color */
  --color-scheme-1-background: var(--color-pickled-bluewood-light); /* @kind color */
  --color-scheme-1-border: var(--opacity-white-20); /* @kind color */
  --color-scheme-1-foreground: var(--color-pickled-bluewood-light); /* @kind color */
  --color-scheme-1-text: var(--color-white); /* @kind color */
  --color-scheme-2-accent: var(--color-pickled-bluewood); /* @kind color */
  --color-scheme-2-background: var(--color-pickled-bluewood-lightest); /* @kind color */
  --color-scheme-2-border: var(--opacity-neutral-darkest-15); /* @kind color */
  --color-scheme-2-foreground: var(--color-pickled-bluewood-lightest); /* @kind color */
  --color-scheme-2-text: var(--color-neutral-darkest); /* @kind color */
  --color-scheme-3-accent: var(--color-pickled-bluewood); /* @kind color */
  --color-scheme-3-background: var(--color-white); /* @kind color */
  --color-scheme-3-border: var(--opacity-neutral-darkest-15); /* @kind color */
  --color-scheme-3-foreground: var(--color-white); /* @kind color */
  --color-scheme-3-text: var(--color-neutral-darkest); /* @kind color */
  --color-scheme-4-accent: var(--color-pickled-bluewood); /* @kind color */
  --color-scheme-4-background: var(--color-mountain-meadow-lightest); /* @kind color */
  --color-scheme-4-border: var(--opacity-neutral-darkest-15); /* @kind color */
  --color-scheme-4-foreground: var(--color-mountain-meadow-lightest); /* @kind color */
  --color-scheme-4-text: var(--color-neutral-darkest); /* @kind color */
  --color-scheme-5-accent: var(--color-white); /* @kind color */
  --color-scheme-5-background: var(--color-pickled-bluewood-dark); /* @kind color */
  --color-scheme-5-border: var(--opacity-white-20); /* @kind color */
  --color-scheme-5-foreground: var(--color-pickled-bluewood-dark); /* @kind color */
  --color-scheme-5-text: var(--color-white); /* @kind color */
  --color-white-2: rgb(255,255,255); /* @kind color */
  --color-white: rgb(255,255,255); /* @kind color */
  --container-container-large: 1280; /* @kind spacing */
  --container-container-medium: 1024; /* @kind spacing */
  --container-container-small: 768; /* @kind spacing */
  --link-primary: var(--color-neutral-darkest); /* @kind color */
  --max-width-max-width-large: 768; /* @kind spacing */
  --max-width-max-width-medium: 560; /* @kind spacing */
  --max-width-max-width-small: 480; /* @kind spacing */
  --max-width-max-width-xlarge: 1024; /* @kind spacing */
  --max-width-max-width-xsmall: 400; /* @kind spacing */
  --max-width-max-width-xxlarge: 1280; /* @kind spacing */
  --max-width-max-width-xxsmall: 320; /* @kind spacing */
  --opacity-neutral-darkest-10: rgba(12,8,1,0.1); /* @kind color */
  --opacity-neutral-darkest-15: rgba(12,8,1,0.15); /* @kind color */
  --opacity-neutral-darkest-20: rgba(12,8,1,0.2); /* @kind color */
  --opacity-neutral-darkest-30: rgba(12,8,1,0.3); /* @kind color */
  --opacity-neutral-darkest-40: rgba(12,8,1,0.4); /* @kind color */
  --opacity-neutral-darkest-50: rgba(12,8,1,0.5); /* @kind color */
  --opacity-neutral-darkest-5: rgba(12,8,1,0.05); /* @kind color */
  --opacity-neutral-darkest-60: rgba(12,8,1,0.6); /* @kind color */
  --opacity-transparent: rgba(255,255,255,0); /* @kind color */
  --opacity-white-10: rgba(255,255,255,0.1); /* @kind color */
  --opacity-white-15: rgba(255,255,255,0.15); /* @kind color */
  --opacity-white-20: rgba(255,255,255,0.2); /* @kind color */
  --opacity-white-30: rgba(255,255,255,0.3); /* @kind color */
  --opacity-white-40: rgba(255,255,255,0.4); /* @kind color */
  --opacity-white-50: rgba(255,255,255,0.5); /* @kind color */
  --opacity-white-5: rgba(255,255,255,0.05); /* @kind color */
  --opacity-white-60: rgba(255,255,255,0.6); /* @kind color */
  --page-padding-padding-global: 64; /* @kind spacing */
  --radius-large: 8; /* @kind radius */
  --radius-medium: 8; /* @kind radius */
  --radius-small: 8; /* @kind radius */
  --section-padding-padding-section-large: 112; /* @kind spacing */
  --section-padding-padding-section-medium: 80; /* @kind spacing */
  --section-padding-padding-section-small: 48; /* @kind spacing */
  --stroke-border-width: 1; /* @kind spacing */
  --stroke-divider-width: 1; /* @kind spacing */
  --text-alternate: var(--color-neutral-white); /* @kind color */
  --text-sizes-heading-1: 72; /* @kind font */
  --text-sizes-heading-2: 52; /* @kind font */
  --text-sizes-heading-3: 44; /* @kind font */
  --text-sizes-heading-4: 36; /* @kind font */
  --text-sizes-heading-5: 28; /* @kind font */
  --text-sizes-heading-6: 22; /* @kind font */
  --text-sizes-text-large: 22; /* @kind font */
  --text-sizes-text-medium: 18; /* @kind font */
  --text-sizes-text-regular: 16; /* @kind font */
  --text-sizes-text-small: 14; /* @kind font */
  --text-sizes-text-tiny: 12; /* @kind font */
}

/* This whole block came from the design export as :root[data-mode="mobile"]
   - a Figma-frame-variant selector, not a real responsive trigger. Nothing
   in this codebase ever sets that attribute, so every one of these
   "mobile" values (page/section padding, the full h1-h6 + text-large/
   medium/regular/small/tiny scale) was dead: every screen size, including
   phones, was getting the desktop numbers above. That's the direct cause
   of the oversized headings and disproportionate section padding on
   mobile/tablet - turned into a real @media query so it actually applies.
   960px matches where the nav already collapses to the mobile hamburger
   menu and grids already start going 1-2 columns (see page.css/vault.css/
   etc.) - lines up the type/spacing scale with everything else that's
   already switching to its mobile treatment at that width. */
@media (max-width: 960px) {
  :root {
    --page-padding-padding-global: 20; /* @kind spacing */
    --section-padding-padding-section-large: 64; /* @kind spacing */
    --section-padding-padding-section-medium: 48; /* @kind spacing */
    --section-padding-padding-section-small: 32; /* @kind spacing */
    --text-sizes-heading-1: 40; /* @kind font */
    --text-sizes-heading-2: 36; /* @kind font */
    --text-sizes-heading-3: 32; /* @kind font */
    --text-sizes-heading-4: 24; /* @kind font */
    --text-sizes-heading-5: 20; /* @kind font */
    --text-sizes-heading-6: 18; /* @kind font */
    --text-sizes-text-large: 18; /* @kind font */
    --text-sizes-text-medium: 16; /* @kind font */
    --text-sizes-text-regular: 16; /* @kind font */
    --text-sizes-text-small: 14; /* @kind font */
    --text-sizes-text-tiny: 12; /* @kind font */
  }
}