/* ═══════════════════════════════════════════════════════
   KAYA PEYZAJ — Design Tokens & CSS Custom Properties
   ═══════════════════════════════════════════════════════ */

:root {
    /* ─── Colors ─── */
    --primary: #145A32;
    --primary-light: #1E8449;
    --primary-dark: #0D3B21;
    --primary-soft: #A9DFBF;
    --primary-glow: rgba(20, 90, 50, 0.12);
    --primary-rgb: 20, 90, 50;

    --accent-gold: #D4A853;
    --accent-gold-light: rgba(212, 168, 83, 0.12);
    --accent-gold-rgb: 212, 168, 83;

    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-dark: #0A1F13;
    --bg-darker: #071A0F;

    --text-primary: #1A1A2E;
    --text-secondary: #6B7280;
    --text-light: #9CA3AF;
    --text-white: #FFFFFF;

    --border-light: #E5E7EB;
    --border-lighter: #F3F4F6;

    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;
    --danger: #EF4444;
    --success: #10B981;

    /* ─── Glass ─── */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-dark: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-border-dark: rgba(255, 255, 255, 0.08);

    /* ─── Typography ─── */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --fs-hero: clamp(2.5rem, 5vw, 4.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(1.05rem, 1.5vw, 1.25rem);
    --fs-body: clamp(0.95rem, 1.2vw, 1.05rem);
    --fs-small: clamp(0.8rem, 1vw, 0.875rem);
    --fs-xs: clamp(0.7rem, 0.8vw, 0.75rem);

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.65;
    --lh-relaxed: 1.85;

    /* ─── Spacing ─── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;

    /* ─── Shadows ─── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 40px rgba(20, 90, 50, 0.15);
    --shadow-gold: 0 0 40px rgba(212, 168, 83, 0.15);

    /* ─── Border Radius ─── */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 100px;

    /* ─── Transitions ─── */
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 600ms;
    --duration-slower: 800ms;
    --duration-slowest: 1200ms;

    /* ─── Z-Index ─── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-navbar: 1000;
    --z-overlay: 1100;
    --z-popup: 1200;
    --z-lightbox: 1300;
    --z-toast: 1400;

    /* ─── Layout ─── */
    --container-max: 1280px;
    --container-padding: 24px;
    --navbar-height: 80px;
    --navbar-height-scrolled: 64px;
}