/* ============================================================
   DESIGN TOKENS — Ristorante Pizzeria Agira
   Single source of truth for all design decisions.
   DESIGN_VARIANCE: 8 | MOTION_INTENSITY: 6 | VISUAL_DENSITY: 4
   ============================================================ */

:root {

  /* ── COLOUR PALETTE ─────────────────────────────────────── */
  --color-crimson-deep:   #991B1B;   /* primary — CTAs, nav wordmark */
  --color-crimson-vivid:  #EF4444;   /* accent — hover underlines    */
  --color-crimson-muted:  #7F1D1D;   /* dark — footer background     */
  --color-crimson-blush:  #FEF2F2;   /* tint — section alternates    */
  --color-crimson-glass:  rgba(153, 27, 27, 0.08);

  --color-white:          #FFFFFF;
  --color-off-white:      #FAF9F7;   /* main page background         */
  --color-stone-50:       #FAFAF9;
  --color-stone-100:      #F5F0EB;   /* warm light gray              */
  --color-stone-200:      #E8E1D9;
  --color-stone-300:      #D6CFC7;   /* borders, dividers            */
  --color-stone-600:      #78716C;   /* secondary body text          */
  --color-ink:            #1C1917;   /* near-black — primary text    */

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --type-display: clamp(3.25rem, 7vw, 6.5rem);
  --type-h1:      clamp(2.25rem, 4vw, 3.75rem);
  --type-h2:      clamp(1.625rem, 2.5vw, 2.5rem);
  --type-h3:      clamp(1.125rem, 1.8vw, 1.625rem);
  --type-body-lg: 1.125rem;
  --type-body:    1rem;
  --type-sm:      0.875rem;
  --type-xs:      0.6875rem;   /* 11px — uppercase labels */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-label: 0.12em;   /* uppercase category labels */
  --tracking-wide:  0.06em;

  /* ── SPACING ─────────────────────────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-width:     1440px;
  --gutter:        clamp(1.25rem, 4vw, 4rem);
  --content-width: clamp(280px, 90vw, 1280px);
  --nav-height:    72px;

  /* ── ANIMATION — Spring Physics ──────────────────────────── */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);        /* fast decel */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);        /* smooth swap */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --dur-instant: 100ms;
  --dur-fast:    200ms;
  --dur-base:    400ms;
  --dur-slow:    700ms;
  --dur-crawl:   1100ms;

  /* ── DEPTH & SHADOW ──────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-card: 0 1px 3px rgba(28, 25, 23, 0.06),
                 0 8px 32px rgba(28, 25, 23, 0.08);
  --shadow-lift: 0 4px 8px rgba(28, 25, 23, 0.08),
                 0 24px 64px rgba(28, 25, 23, 0.14);
  --shadow-modal: 0 8px 16px rgba(28, 25, 23, 0.1),
                  0 32px 96px rgba(28, 25, 23, 0.2);

  /* ── BEZEL SYSTEM — Double-bezel card depth ──────────────── */
  --bezel-outer:  1px solid var(--color-stone-300);
  --bezel-inner:  1px solid rgba(255, 255, 255, 0.72);
  --bezel-radius: 4px;

  /* ── Z-INDEX SCALE ───────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
}