/* ========================================
   DESIGN TOKENS — Nativos América
   ======================================== */
:root {
    /* ── Color Palette ── */
    --green-deep: #0A2E1C;
    --green-mid: #14533A;
    --green-vivid: #2ECC71;
    --green-accent: #27AE60;
    --green-glow: rgba(46, 204, 113, 0.35);
    --green-glass: rgba(10, 46, 28, 0.65);

    --gold-earth: #D4A855;
    --gold-dark: #C5942A;
    --gold-glow: rgba(212, 168, 85, 0.25);

    --cream: #FAF5E8;
    --cream-dark: #EDE5D0;

    --black-deep: #050D09;
    --black-soft: #0B1A12;

    --white: #FFFFFF;
    --white-muted: rgba(255, 255, 255, 0.7);
    --white-ghost: rgba(255, 255, 255, 0.12);

    /* ── Typography ── */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', 'DM Sans', system-ui, sans-serif;
    --font-mono: 'Space Grotesk', 'JetBrains Mono', monospace;

    /* ── Font Sizes (fluid) ── */
    --fs-hero: clamp(2.8rem, 5.5vw, 5.5rem);
    --fs-h2: clamp(2rem, 3.5vw, 3.5rem);
    --fs-h3: clamp(1.35rem, 2vw, 1.85rem);
    --fs-body: clamp(1rem, 1.15vw, 1.15rem);
    --fs-small: clamp(0.85rem, 0.95vw, 0.95rem);
    --fs-counter: clamp(2.5rem, 4.5vw, 4.5rem);

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

    --section-pad-y: clamp(5rem, 10vh, 8rem);
    --section-pad-x: clamp(1.5rem, 5vw, 6rem);

    /* ── Layout ── */
    --max-width: 1280px;
    --max-width-wide: 1440px;
    --border-radius: 12px;
    --border-radius-lg: 20px;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.7s;

    /* ── Shadows ── */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.18);
    --shadow-glow: 0 0 40px var(--green-glow);
    --shadow-gold: 0 0 30px var(--gold-glow);
    --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.25);

    /* ── Glassmorphism ── */
    --glass-bg: rgba(10, 46, 28, 0.45);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 20px;
}