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

:root {
  /* Namza's menu palette. Existing token names keep the shared app components compatible. */
  --orange: #F27E11;          /* orange surfaces carry dark labels */
  --orange-deep: #E67009;     /* pressed / hover on orange */
  --ember: #A44506;           /* darker orange for text on ivory */
  --bottle: #18221A;          /* headings, dark surfaces */
  --bottle-2: #2B372C;
  --olive: #18221A;           /* brand mark and pattern */
  --peach: #F7C48B;
  --peach-soft: #FCE2B9;
  --blush: #FFF4D9;

  /* Ivory paper and charcoal ink */
  --paper: #FEFBEC;
  --ink: #18221A;
  --ink-soft: #555B50;
  --ink-faint: #696D61;
  --line: #E9DFC6;
  --line-strong: #D9CBB0;

  /* Type */
  --font-display: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --font-ui: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --puff: normal;

  --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(24 34 26 / .06);
  --sh-2: 0 1px 2px rgb(24 34 26 / .05), 0 14px 34px -14px rgb(24 34 26 / .24);
  --sh-3: 0 2px 6px rgb(24 34 26 / .06), 0 30px 70px -28px rgb(24 34 26 / .38);
  --glow: 0 14px 30px -12px rgb(242 126 17 / .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; }
}