/* ---------------------------------------------------------
   Platte — Colors & Type
   --------------------------------------------------------- */

/* Fonts — Visby CF substitute: Nunito (closest Google Fonts match to Visby CF
   for geometric / rounded / humanist proportions). Replace with the real
   Visby CF font files when available.
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* From Brand-Platte.pdf.                                                  */
  /* NB: the PDF lists "Pumpkin Orange" with hex #F4FFEC — that code is a    */
  /* very pale beige, not orange. We treat #F4FFEC as the brand's CREAM      */
  /* background, and use the ACTUAL pumpkin orange that appears in the       */
  /* logo / brand imagery (≈ #D9541E). Flagged to the user in README.        */

  --color-deep-teal:       #002F37;  /* primary dark, text, bg */
  --color-deep-teal-ink:   #0E2A1A;  /* logomark dark (warmer near-black) */
  --color-forest-green:    #167208;  /* secondary — CTAs, "eat safe" */
  --color-light-green:     #7EDE56;  /* accent / success / highlight */
  --color-pumpkin-orange:  #D9541E;  /* warm accent (true pumpkin) */
  --color-cream:           #F4FFEC;  /* brand off-white (the PDF's
                                        #F4FFEC — we use it as background) */
  --color-cream-warm:      #F4EFE6;  /* alt warm cream seen on marketing */

  /* ---------- NEUTRAL RAMP ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F3;
  --neutral-100: #F1EEE6;
  --neutral-200: #E4DFD3;
  --neutral-300: #CFC9BB;
  --neutral-400: #9E9A8E;
  --neutral-500: #6E6B63;
  --neutral-600: #4A4842;
  --neutral-700: #2E2D29;
  --neutral-800: #1C1B18;
  --neutral-900: #0B0B0A;

  /* ---------- SEMANTIC — FOREGROUND ---------- */
  --fg-primary:   var(--color-deep-teal);
  --fg-secondary: #3C5A5F;
  --fg-muted:     #6A7F82;
  --fg-on-dark:   var(--color-cream);
  --fg-on-brand:  var(--color-cream-warm);
  --fg-link:      var(--color-forest-green);

  /* ---------- SEMANTIC — BACKGROUND ---------- */
  --bg-page:      var(--color-cream-warm);
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    #EDE8DD;
  --bg-dark:      var(--color-deep-teal);
  --bg-brand:     var(--color-pumpkin-orange);

  /* ---------- SEMANTIC — ALLERGEN / DIET STATES ---------- */
  /* These map to the core flows of Platte: can eat / careful / cannot eat. */
  --state-safe-bg:        #E8F7DE;
  --state-safe-fg:        var(--color-forest-green);
  --state-safe-border:    #B5DFA0;

  --state-warn-bg:        #FFF1DF;
  --state-warn-fg:        #9A5A00;
  --state-warn-border:    #F2C98A;

  --state-danger-bg:      #FBE3D7;
  --state-danger-fg:      #9B2F08;
  --state-danger-border:  #F0A98C;

  --state-info-bg:        #DDEDEF;
  --state-info-fg:        var(--color-deep-teal);
  --state-info-border:    #A9CDD1;

  /* ---------- BORDERS ---------- */
  --border-hair:    rgba(0, 47, 55, 0.08);
  --border-soft:    rgba(0, 47, 55, 0.14);
  --border-strong:  rgba(0, 47, 55, 0.32);
  --border-brand:   var(--color-forest-green);

  /* ---------- SHADOW SYSTEM ---------- */
  /* Warm, low-intensity shadows — food marketplace feel, not tech crispness. */
  --shadow-xs:  0 1px 2px rgba(0, 47, 55, 0.06);
  --shadow-sm:  0 2px 6px rgba(0, 47, 55, 0.08);
  --shadow-md:  0 8px 20px -6px rgba(0, 47, 55, 0.12);
  --shadow-lg:  0 20px 40px -12px rgba(0, 47, 55, 0.18);
  --shadow-xl:  0 32px 64px -16px rgba(0, 47, 55, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- RADII ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- TYPE — SIZES ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   84px;

  /* ---------- TYPE — WEIGHTS (Visby CF family) ---------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ---------- TYPE — LINE / TRACKING ---------- */
  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;
}

/* ---------------------------------------------------------
   Element-level defaults
   --------------------------------------------------------- */
html { font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-page); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(42px, 5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 3.4vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0;
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
  margin: 0;
}
.lede {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-forest-green);
}
small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--color-light-green); color: var(--color-deep-teal); }