/* ==========================================================================
   DESIGN TOKENS — Pachy Mendez Cinematic Editorial Theme
   ========================================================================== */

:root {
    /* ── Colors ──────────────────────────────────────────────────────────── */
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A1A2E;
    --bg-tertiary: #111122;
    --surface: #16213E;
    --surface-hover: #1c2a4a;
    --text-primary: #F5F0E8;
    --text-secondary: #A0A0A0;
    --text-muted: #6B6B7B;
    --accent-gold: #C9A84C;
    --accent-gold-light: #D4C07A;
    --accent-warm: #D4AF37;
    --accent-glow: rgba(201, 168, 76, 0.15);
    --border: #2A2A3E;
    --border-light: #3A3A4E;
    --overlay-dark: rgba(13, 13, 13, 0.7);
    --overlay-deeper: rgba(13, 13, 13, 0.85);

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

    /* Font Sizes — Fluid (clamp for responsive) */
    --fs-hero: clamp(2.8rem, 6vw, 5.5rem);
    --fs-hero-sub: clamp(1rem, 2vw, 1.5rem);
    --fs-h1: clamp(2rem, 4vw, 3.5rem);
    --fs-h2: clamp(1.6rem, 3vw, 2.5rem);
    --fs-h3: clamp(1.2rem, 2vw, 1.75rem);
    --fs-h4: clamp(1rem, 1.5vw, 1.25rem);
    --fs-body: clamp(0.95rem, 1.2vw, 1.1rem);
    --fs-small: clamp(0.8rem, 1vw, 0.9rem);
    --fs-label: clamp(0.7rem, 0.8vw, 0.8rem);

    /* Line Heights */
    --lh-tight: 1.15;
    --lh-heading: 1.3;
    --lh-body: 1.7;

    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.08em;
    --ls-wider: 0.15em;

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;

    --section-pad: clamp(48px, 8vw, 100px);
    --content-max: 1200px;
    --content-narrow: 800px;

    /* ── Borders & Radius ─────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 4px 30px rgba(201, 168, 76, 0.15);

    /* ── Transitions ─────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 0.2s var(--ease-out);
    --transition-base: 0.3s var(--ease-out);
    --transition-smooth: 0.5s var(--ease-in-out);
    --transition-slow: 0.8s var(--ease-in-out);

    /* ── Z-index Scale ───────────────────────────────────────────────── */
    --z-behind: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-nav: 500;
}