/* Bel Air Ranch design tokens.
   Every colour, size, space, radius, shadow and easing lives here.
   Components in style.css use var(--token) only. See STYLE_GUIDE.md. */

:root {
  /* Brand colour (from the logo and pack) */
  --olive-950: #1f2518;   /* footer, deepest surface */
  --olive-900: #2a3220;   /* dark sections, headings on light */
  --olive-700: #3d4830;   /* hover of --olive-600 */
  --olive-600: #525f3f;   /* logo green: primary buttons, brand fills */
  --sage-500: #829763;    /* secondary green */
  --sage-300: #b9c6a2;    /* light green on dark */
  --sage-100: #e3e8d6;    /* pale green tint */

  /* Spice accents (the blend: Korean red pepper, peppercorn, shallot) */
  --paprika-600: #b8482a; /* red pepper: sale, highlight, hover fill */
  --paprika-100: #f6ddd2;
  --mustard-500: #e0a63a; /* golden: cards, stickers, hover fill */
  --mustard-100: #f8ebcd;
  --shallot-500: #8a4f6e; /* purple shallot: tiny accents only */

  /* Flavor tints: hero blob and rail thumbnails, one per blend */
  --tint-original: #dfe6cf;
  --tint-steak: #f1d3cd;
  --tint-brisket: #e9dccb;
  --tint-bird: #f6e5bd;
  --tint-blackening: #e2e0da;
  --tint-med: #d8e4e8;
  --tint-smokey: #f4d6c2;

  /* Neutrals */
  --cream-50: #fbf8f1;    /* page background */
  --cream-100: #f4eee1;   /* hero and quiet surfaces */
  --cream-200: #eae1cd;   /* borders on cream, tape */
  --paper: #ffffff;       /* photo frames, cards on cream */
  --ink: #232a1c;         /* headings, primary text */
  --ink-2: #4a5140;       /* body text */
  --muted: #7d8273;       /* secondary text */
  --line: rgba(35, 42, 28, 0.14);
  --line-strong: rgba(35, 42, 28, 0.28);
  --on-dark: #f4eee1;
  --on-dark-2: rgba(244, 238, 225, 0.72);
  --on-dark-3: rgba(244, 238, 225, 0.45);
  --line-on-dark: rgba(244, 238, 225, 0.16);
  --star: #e0a63a;
  --tape: rgba(255, 255, 255, 0.62);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  /* Fluid display sizes */
  --fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 1.4rem + 5.4vw, 6rem);
  --fs-marquee: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  --fs-giant: clamp(4rem, 2rem + 10vw, 11rem);

  --lh-none: 1;
  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-label: 0.12em;

  /* Space */
  --s-4: 0.25rem;
  --s-8: 0.5rem;
  --s-12: 0.75rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-24: 1.5rem;
  --s-32: 2rem;
  --s-40: 2.5rem;
  --s-48: 3rem;
  --s-64: 4rem;
  --s-80: 5rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 1280px;

  /* Shape */
  --r-4: 4px;
  --r-8: 8px;
  --r-16: 16px;
  --r-24: 24px;
  --r-pill: 999px;
  --border: 1.5px;

  /* Depth */
  --shadow-sm: 0 2px 6px rgba(35, 42, 28, 0.08);
  --shadow-md: 0 14px 30px -12px rgba(35, 42, 28, 0.28);
  --shadow-lg: 0 30px 60px -20px rgba(35, 42, 28, 0.38);
  --shadow-pack: 0 40px 50px -30px rgba(35, 42, 28, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 380ms;
  --t-slow: 900ms;

  /* Header */
  --header-h: 132px;
  --header-h-scrolled: 88px;
  --logo-h: 118px;
  --logo-h-scrolled: 72px;

  /* Layers */
  --z-header: 50;
  --z-drawer: 60;
  --z-toast: 70;
}