/* ============================================================
   M.P Events & Tours — Design Tokens
   tokens.css — Single source of design truth
   All other CSS files reference these variables only.
   ============================================================ */

:root {

  /* ── Brand Colours ─────────────────────────────────────── */
  --clr-primary:        #B84A22;   /* Deep Saffron / Terracotta */
  --clr-primary-dark:   #8B3314;   /* Hover / Active */
  --clr-primary-light:  #D4652E;   /* Light variant */
  --clr-primary-soft:   #F9EDE8;   /* Tinted background */

  --clr-secondary:      #132F3C;   /* Deep Teal (Midnight Lake) */
  --clr-secondary-dark: #0A1B24;   /* Hover / Active */
  --clr-secondary-light:#2A5A70;   /* Light variant */
  --clr-secondary-soft: #E8F2F6;   /* Tinted background */

  --clr-gold:           #C59B48;   /* Accent gold — festivals, luxury */
  --clr-gold-dark:      #A8791F;
  --clr-gold-soft:      #FBF4E6;

  --clr-cream:          #FCFAF5;   /* Warm background */
  --clr-cream-dark:     #F2EDE5;   /* Slightly deeper */

  --clr-white:          #FFFFFF;
  --clr-black:          #0A0A0A;

  --clr-text:           #1C1C1E;   /* Primary text */
  --clr-text-secondary: #4A4A55;   /* Secondary text */
  --clr-text-muted:     #717180;   /* Muted / captions */
  --clr-text-placeholder:#9999AA; /* Form placeholder */
  --clr-text-on-dark:   #FFFFFF;   /* Text on dark bg */
  --clr-text-on-primary:#FFFFFF;   /* Text on primary bg */

  --clr-border:         #E5DDD5;   /* Default border */
  --clr-border-light:   #F0EAE2;   /* Subtle border */
  --clr-border-focus:   #B84A22;   /* Focus ring */

  --clr-success:        #1A7A4A;
  --clr-error:          #C62828;
  --clr-warning:        #C59B48;
  --clr-info:           #132F3C;

  /* ── Typography ────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-base:     1.6;
  --lh-relaxed:  1.75;

  --ls-tight:    -0.03em;
  --ls-base:     -0.01em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-caps:     0.12em;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-hero:     clamp(2.75rem, 6vw + 0.5rem, 5.5rem);
  --fs-h1:       clamp(2rem,    4vw + 0.5rem, 3.75rem);
  --fs-h2:       clamp(1.5rem,  3vw + 0.25rem, 2.75rem);
  --fs-h3:       clamp(1.2rem,  2vw + 0.2rem, 1.75rem);
  --fs-h4:       clamp(1.05rem, 1.5vw + 0.1rem, 1.35rem);
  --fs-lead:     clamp(1rem,    1.5vw + 0.1rem, 1.25rem);
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-xxs:      0.6875rem;

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

  /* Section vertical padding */
  --section-pad-y:  clamp(4rem, 8vw, 7rem);
  --section-pad-sm: clamp(2.5rem, 5vw, 4rem);

  /* ── Layout ─────────────────────────────────────────────── */
  --max-w:        1200px;
  --max-w-narrow: 780px;
  --max-w-wide:   1400px;

  --grid-gap:     clamp(1rem, 2.5vw, 1.75rem);
  --grid-gap-lg:  clamp(1.5rem, 3vw, 2.5rem);

  /* ── Borders & Radius ───────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  --border-w:    1px;
  --border-w-md: 2px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-2xl:  0 32px 80px rgba(0, 0, 0, 0.22);

  --shadow-cinematic: 0 20px 40px rgba(19, 47, 60, 0.08);
  --shadow-hover: 0 10px 30px rgba(184, 74, 34, 0.1);

  --shadow-primary: 0 4px 24px rgba(184, 74, 34, 0.30);
  --shadow-card:    0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 48px rgba(0, 0, 0, 0.16);

  /* ── Transitions & Motion ───────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.0);

  --motion-fast:   250ms;
  --motion-base:   400ms;
  --motion-slow:   800ms;
  --motion-reveal: 1200ms;

  --dur-fast:      var(--motion-fast);
  --dur-base:      var(--motion-base);
  --dur-slow:      var(--motion-slow);
  --dur-slower:    var(--motion-reveal);

  --transition-base: var(--dur-base) var(--ease-out);
  --transition-slow: var(--dur-slow) var(--ease-out);

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;

  /* ── Image Aspect Ratios ─────────────────────────────────── */
  --ratio-hero:        16 / 9;
  --ratio-card:        4 / 3;
  --ratio-portrait:    3 / 4;
  --ratio-square:      1 / 1;
  --ratio-wide:        21 / 9;
  --ratio-destination: 3 / 2;

  /* ── Header Height ───────────────────────────────────────── */
  --header-h:        72px;
  --header-h-mobile: 60px;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}