/* ==========================================================================
   Nonna's Legacy — Design Tokens
   Aesthetic: "Sun-drenched Cucina" — warm Italian heritage, editorial, premium.
   A fresh web-first language (the iOS app will follow this lead).
   ========================================================================== */

:root {
  /* ---- Palette --------------------------------------------------------- */
  /* Warm grounds */
  --paper:     #FBF3E6;  /* semolina — primary background           */
  --paper-2:   #F5E8D2;  /* deeper cream — alternating sections     */
  --paper-3:   #EBD9B8;  /* toasted — deepest warm panel            */
  --cream:     #FFFCF6;  /* card / surface — warm near-white         */

  /* Ink (warm espresso, never pure black) */
  --ink:       #2A201A;  /* primary text                            */
  --ink-2:     #5E5046;  /* secondary text                          */
  --ink-3:     #8C7C6C;  /* muted / captions                        */

  /* Sugo — the hero accent (terracotta-red) */
  --tomato:    #C8462C;
  --tomato-2:  #A6341E;  /* deep — hovers, pressed                  */
  --tomato-3:  #E6764F;  /* soft coral — washes, tints              */

  /* Basil — secondary (deep garden green) */
  --basil:     #4E6B3E;
  --basil-2:   #364E2A;  /* darkest                                 */
  --basil-3:   #87A75C;  /* young olive leaf                        */

  /* Saffron — tertiary (olive-oil gold; the "AI magic" highlight) */
  --saffron:   #E2A02C;
  --saffron-2: #F4C455;  /* light                                   */

  /* Supporting */
  --crust:     #7C4A2D;  /* baked crust brown                       */
  --plum:      #6E2A3C;  /* deep fig — used sparingly               */

  /* Hairlines & tints (mixed for warmth) */
  --line:        color-mix(in oklab, var(--ink) 13%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 24%, transparent);
  --tint-tomato: color-mix(in oklab, var(--tomato) 12%, var(--paper));
  --tint-basil:  color-mix(in oklab, var(--basil) 12%, var(--paper));
  --tint-saffron:color-mix(in oklab, var(--saffron) 16%, var(--paper));

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", "Snell Roundhand", "Bradley Hand", cursive;

  /* Fluid type scale (min … max, fluid between 360px–1440px viewports) */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  --fs-small:   clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
  --fs-body:    clamp(1.02rem, 0.97rem + 0.24vw, 1.2rem);
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.62vw, 1.55rem);
  --fs-h4:      clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3:      clamp(1.45rem, 1.22rem + 1.1vw, 2.05rem);
  --fs-h2:      clamp(2.05rem, 1.55rem + 2.3vw, 3.4rem);
  --fs-h1:      clamp(2.6rem, 1.75rem + 3.9vw, 4.7rem);
  --fs-display: clamp(3.1rem, 1.7rem + 6.1vw, 6.4rem);

  --lh-tight:  1.04;
  --lh-snug:   1.16;
  --lh-body:   1.62;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:  -0.02em;

  /* Fraunces variable axes (warmth dialed in) */
  --fraunces-soft: 40;
  --fraunces-wonk: 0;

  /* ---- Spacing & layout ------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(5rem, 4rem + 6vw, 9rem);  /* section rhythm */

  --maxw:        1220px;
  --maxw-wide:   1360px;
  --maxw-narrow: 760px;
  --gutter:      clamp(1.25rem, 5vw, 4rem);

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted, layered) ---------------------------------- */
  --shadow-xs:  0 1px 2px rgba(42, 32, 26, 0.06);
  --shadow-sm:  0 2px 8px rgba(42, 32, 26, 0.07), 0 1px 2px rgba(42, 32, 26, 0.06);
  --shadow-md:  0 10px 30px -12px rgba(60, 40, 28, 0.22), 0 2px 8px rgba(60, 40, 28, 0.08);
  --shadow-lg:  0 28px 60px -22px rgba(60, 40, 28, 0.30), 0 8px 18px -10px rgba(60, 40, 28, 0.14);
  --shadow-card: 0 18px 42px -20px rgba(80, 50, 30, 0.30);
  --shadow-glow-saffron: 0 0 0 1px color-mix(in oklab, var(--saffron) 50%, transparent),
                         0 12px 40px -10px color-mix(in oklab, var(--saffron) 55%, transparent);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid:  420ms;
  --dur-slow: 800ms;

  /* ---- Texture: fine paper grain (inline SVG, subtle) ------------------ */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-mid:  1ms;
    --dur-slow: 1ms;
  }
}