/* =====================================================================
   SAORI FOOD — Design Tokens
   Art direction: "Creamería Premium" — warm cream canvas, amber/gold
   brand (refined from #FFA826), warm charcoal ink, pasture-green accent.
   ===================================================================== */

:root {
  /* ---- Brand & neutrals (warm) ---- */
  --cream-50:  #FFFDF8;
  --cream-100: #FBF6EC;
  --cream-150: #F7EFDF;
  --cream-200: #F2E7D2;
  --cream-300: #E9D9BD;
  --sand-400:  #D9C19A;

  --gold-200:  #FFE0A6;
  --gold-300:  #FFC861;
  --gold-400:  #FFB23E;   /* highlight */
  --gold-500:  #F2A71B;   /* PRIMARY brand */
  --gold-600:  #DC8E0C;
  --caramel-700: #A75E16;
  --caramel-800: #7E4512;

  --ink-900:   #181512;   /* near-black, warm */
  --ink-850:   #201B16;
  --ink-800:   #2A241D;
  --ink-700:   #3C342A;
  --ink-600:   #574C3E;
  --ink-500:   #6E6253;
  --ink-400:   #8C8073;
  --ink-300:   #ABA192;

  --pasture-700: #44521F;
  --pasture-600: #5C6B36;
  --pasture-500: #71823F;
  --pasture-300: #AEBE7E;

  /* ---- Semantic surfaces ---- */
  --bg:           var(--cream-100);
  --bg-alt:       var(--cream-150);
  --bg-deep:      var(--cream-200);
  --surface:      var(--cream-50);
  --ink:          var(--ink-900);
  --ink-soft:     var(--ink-600);
  --ink-mute:     var(--ink-400);
  --primary:      var(--gold-500);
  --primary-strong: var(--gold-600);
  --on-primary:   #2A1B05;
  --line:         color-mix(in oklab, var(--ink-900) 12%, transparent);
  --line-soft:    color-mix(in oklab, var(--ink-900) 7%, transparent);
  --line-gold:    color-mix(in oklab, var(--gold-500) 38%, transparent);

  /* Dark sections (enfoque / footer / origen) */
  --dark-bg:      #16130F;
  --dark-bg-2:    #1E1A14;
  --dark-surface: #241F18;
  --dark-line:    color-mix(in oklab, #FFF 12%, transparent);
  --on-dark:      #F3EBDC;
  --on-dark-mute: #B7AC99;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (Major-third-ish, clamped) */
  --step--2: clamp(0.69rem, 0.67rem + 0.12vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.22vw, 0.96rem);
  --step-0:  clamp(1rem,    0.95rem + 0.27vw, 1.14rem);
  --step-1:  clamp(1.2rem,  1.11rem + 0.46vw, 1.46rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.78vw, 1.92rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.26vw, 2.55rem);
  --step-4:  clamp(2.07rem, 1.68rem + 1.96vw, 3.39rem);
  --step-5:  clamp(2.49rem, 1.9rem + 2.95vw, 4.5rem);
  --step-6:  clamp(2.99rem, 2.05rem + 4.68vw, 5.98rem);
  --step-7:  clamp(3.58rem, 2.0rem + 7.9vw,  7.9rem);

  --lh-tight: 1.04;
  --lh-snug:  1.16;
  --lh-body:  1.62;
  --tracking-eyebrow: 0.22em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;   --sp-11: 11rem;

  /* Section vertical rhythm (fluid) */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);

  /* ---- Radii ---- */
  --r-xs: 8px;  --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 36px;
  --r-2xl: 48px; --r-pill: 999px;

  /* ---- Shadows (warm-tinted) ---- */
  --sh-1: 0 1px 2px rgba(24,21,18,.05), 0 3px 10px -2px rgba(24,21,18,.06);
  --sh-2: 0 10px 30px -10px rgba(24,21,18,.18);
  --sh-3: 0 28px 60px -22px rgba(24,21,18,.30);
  --sh-4: 0 50px 90px -30px rgba(24,21,18,.42);
  --sh-gold: 0 20px 44px -14px rgba(242,167,27,.5);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .2s; --dur-2: .4s; --dur-3: .7s; --dur-4: 1.1s;

  /* ---- Misc ---- */
  --header-h: 76px;
  --grain-opacity: .06;
  --ring: 0 0 0 3px color-mix(in oklab, var(--gold-500) 45%, transparent);
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
}