@layer reset, base, layout, components, views, utilities;

:root {
  /* Brand — measured from the logo, menu and packaging */
  --orange: #F36138;          /* surfaces, primary buttons (white labels ≥19px bold) */
  --orange-deep: #E2532C;     /* pressed / hover on orange */
  --ember: #C4461A;           /* orange that carries text (5:1 on white) */
  --bottle: #0B4024;          /* headings, dark surfaces */
  --bottle-2: #145232;
  --olive: #304B24;           /* stripe pattern */
  --peach: #F7C8BA;
  --peach-soft: #FCE4DA;
  --blush: #FFF5F0;

  /* Neutrals, tinted toward the bottle green */
  --paper: #FFFFFF;
  --ink: #10231A;
  --ink-soft: #4C5A4F;
  --ink-faint: #69746C;
  --line: #F0E3DA;
  --line-strong: #E4D3C8;

  /* Type */
  --font-display: 'DynaPuff', 'Gabarito', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Gabarito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --puff: 'wdth' 75;           /* condensed DynaPuff, closest to the printed menu headers */

  --t-hero: clamp(3.4rem, 1.2rem + 9.6vw, 9.5rem);
  --t-h1: clamp(2.5rem, 1.4rem + 4.2vw, 5rem);
  --t-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --t-h3: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  --t-xl: 1.375rem;
  --t-l: 1.1875rem;
  --t-m: 1.0625rem;
  --t-base: 1rem;
  --t-s: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-2xs: 0.75rem;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --gutter: clamp(16px, 4.2vw, 48px);
  --section: clamp(56px, 7vw, 112px);
  --wrap: 1360px;

  /* Shape */
  --r-xs: 8px; --r-s: 12px; --r-m: 18px; --r-l: 26px; --r-xl: 36px; --r-pill: 999px;

  /* Depth */
  --sh-1: 0 1px 2px rgb(11 64 36 / .06);
  --sh-2: 0 1px 2px rgb(11 64 36 / .05), 0 14px 34px -14px rgb(11 64 36 / .24);
  --sh-3: 0 2px 6px rgb(11 64 36 / .06), 0 30px 70px -28px rgb(11 64 36 / .38);
  --glow: 0 14px 30px -12px rgb(243 97 56 / .7);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 560ms;

  /* Chrome */
  --topbar-h: 64px;
  --tabbar-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  color-scheme: light;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121,
      1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%,
      0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
    --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%,
      0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  }
}

@media (min-width: 1024px) {
  :root { --topbar-h: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
}