/* ============================================================
   GOLDEN KEY HOLDING — CSS CUSTOM PROPERTIES (VARIABLES)
   Version: 2.0.0
   Description: Centralized design tokens for the entire project
   Author: Golden Key Dev Team
   ============================================================ */

:root {
    /* ─── PRIMARY PALETTE ─── */
    --color-primary: #0F172A;
    --color-primary-rgb: 15, 23, 42;
    --color-primary-light: #1E293B;
    --color-primary-dark: #0A0F1A;

    /* ─── GOLD PALETTE ─── */
    --color-gold: #D4AF37;
    --color-gold-rgb: 212, 175, 55;
    --color-gold-hover: #B8962D;
    --color-gold-light: #F8F4E8;
    --color-gold-glow: rgba(212, 175, 55, 0.3);
    --color-gold-subtle: #FDF6E3;

    /* ─── NEUTRALS ─── */
    --color-bg: #FAFAFA;
    --color-bg-alt: #F8FAFC;
    --color-bg-dark: #0F172A;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F5F9;
    --color-accent: #F8F4E8;
    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;

    /* ─── TEXT COLORS ─── */
    --color-text: #1E293B;
    --color-text-rgb: 30, 41, 59;
    --color-text-muted: #64748B;
    --color-text-light: #94A3B8;
    --color-text-inverse: #F8FAFC;

    /* ─── SEMANTIC COLORS ─── */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;

    /* ─── DARK THEME OVERRIDES ─── */
    [data-theme="dark"] {
        --color-bg: #0B1120;
        --color-bg-alt: #111827;
        --color-surface: #1E293B;
        --color-surface-alt: #334155;
        --color-text: #F1F5F9;
        --color-text-muted: #94A3B8;
        --color-text-light: #64748B;
    }

    /* ─── TYPOGRAPHY ─── */
    --font-primary: 'Vazirmatn', 'IRANSansX', 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display: 'Vazirmatn', 'IRANSansX', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --fs-xs: clamp(0.7rem, 0.8vw, 0.8rem);
    --fs-sm: clamp(0.8rem, 0.9vw, 0.9rem);
    --fs-base: clamp(0.9rem, 1vw, 1rem);
    --fs-md: clamp(1rem, 1.15vw, 1.125rem);
    --fs-lg: clamp(1.1rem, 1.4vw, 1.3rem);
    --fs-xl: clamp(1.3rem, 2vw, 1.6rem);
    --fs-2xl: clamp(1.6rem, 2.5vw, 2rem);
    --fs-3xl: clamp(2rem, 3.5vw, 2.8rem);
    --fs-4xl: clamp(2.4rem, 5vw, 3.8rem);
    --fs-5xl: clamp(3rem, 6vw, 5rem);
    --fs-hero: clamp(2.2rem, 5.5vw, 4.5rem);

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    --lh-tight: 1.2;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.05em;

    /* ─── SPACING ─── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --section-padding: clamp(4rem, 8vw, 8rem);

    /* ─── BORDERS & RADII ─── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ─── SHADOWS ─── */
    --shadow-xs: 0 1px 2px rgba(var(--color-primary-rgb), 0.04);
    --shadow-sm: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
    --shadow-md: 0 4px 16px rgba(var(--color-primary-rgb), 0.08);
    --shadow-lg: 0 8px 32px rgba(var(--color-primary-rgb), 0.1);
    --shadow-xl: 0 16px 48px rgba(var(--color-primary-rgb), 0.12);
    --shadow-2xl: 0 24px 64px rgba(var(--color-primary-rgb), 0.16);
    --shadow-gold: 0 8px 32px rgba(var(--color-gold-rgb), 0.25);
    --shadow-gold-lg: 0 16px 48px rgba(var(--color-gold-rgb), 0.35);

    /* ─── GLASS MORPHISM ─── */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-light: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-border-light: rgba(255, 255, 255, 0.3);
    --glass-blur: 20px;
    --glass-blur-heavy: 40px;

    /* ─── TRANSITIONS ─── */
    --ease-default: 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);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    --transition-fast: all var(--duration-fast) var(--ease-default);
    --transition: all var(--duration-normal) var(--ease-default);
    --transition-slow: all var(--duration-slow) var(--ease-smooth);

    /* ─── LAYOUT ─── */
    --container-max: 1320px;
    --container-wide: 1440px;
    --container-narrow: 900px;
    --header-height: 80px;
    --header-height-scrolled: 68px;

    /* ─── Z-INDEX SCALE ─── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-loading: 9999;

    /* ─── GRADIENTS ─── */
    --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #F4D03F 50%, #D4AF37 100%);
    --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --gradient-hero: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.75) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(212,175,55,0.15) 0, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(212,175,55,0.1) 0, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(15,23,42,0.05) 0, transparent 50%);
    --gradient-text: linear-gradient(135deg, #D4AF37 0%, #F4D03F 100%);
}