/* ============================================
   BEYLİKDÜZÜ SMART-B - White & Gold Design System
   Design Token System v4.0
   ============================================ */

:root {
    /* ── Core Palette (Beyaz & Canlı Sarı/Altın) ── */
    --gold: #F59E0B;
    --gold-dark: #D97706;
    --gold-light: #FDE68A;
    --gold-bright: #FFB800;
    
    --navy-dark: #0A2540;
    --slate-dark: #0F172A;
    --slate-muted: #475569;
    
    --white: #FFFFFF;
    --ivory: #FAFAFA;
    --warm-white: #FFFFFF;
    --light-gray: #F1F5F9;

    /* Text Colors */
    --text-heading: #0F172A;
    --text-body: #334155;
    --text-muted: #64748B;
    --text-light: #94A3B8;
    --text-ivory: #FFFFFF;
    --text-ivory-muted: rgba(255, 255, 255, 0.75);
    --text-gold: #F59E0B;
    --text-gold-muted: #D97706;

    /* Surfaces */
    --bg-white: #FFFFFF;
    --bg-ivory: #FAFAFA;
    --bg-warm: #F8FAFC;
    --bg-dark: #0A2540;
    --bg-footer: #0A2540;
    --bg-tint: rgba(245, 158, 11, 0.06);
    --bg-tint-strong: rgba(245, 158, 11, 0.12);

    /* Borders */
    --border-subtle: #E2E8F0;
    --border-default: #CBD5E1;
    --border-strong: #94A3B8;
    --border-gold: #F59E0B;
    --border-ivory: rgba(255, 255, 255, 0.2);

    /* Overlays */
    --overlay-hero: linear-gradient(160deg, rgba(10, 37, 64, 0.90) 0%, rgba(15, 23, 42, 0.85) 100%);
    --overlay-dark: rgba(10, 37, 64, 0.92);
    --overlay-page-hero: linear-gradient(160deg, rgba(10, 37, 64, 0.92) 0%, rgba(15, 23, 42, 0.85) 100%);
    --overlay-card: linear-gradient(to top, rgba(10, 37, 64, 0.95) 0%, rgba(10, 37, 64, 0.35) 50%, transparent 100%);

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    --gradient-gold-soft: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.08));
    --gradient-dark: linear-gradient(180deg, #0A2540 0%, #0F172A 100%);

    /* Glow */
    --glow-heading: 0 0 8px rgba(245, 158, 11, 0.40), 0 0 24px rgba(245, 158, 11, 0.20);
    --glow-subtle: 0 0 6px rgba(245, 158, 11, 0.25);

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 100px;

    /* Section verticals */
    --section-pad: 100px;
    --section-pad-tablet: 80px;
    --section-pad-mobile: 50px;

    /* ── Radii ── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 50px;

    /* ── Shadows ── */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 10px 30px rgba(10, 37, 64, 0.06);
    --shadow-card-hover: 0 20px 50px rgba(245, 158, 11, 0.20);
    --shadow-elevated: 0 25px 70px rgba(10, 37, 64, 0.10);
    --shadow-gold-glow: 0 0 40px rgba(245, 158, 11, 0.20);
    --shadow-btn: 0 6px 20px rgba(245, 158, 11, 0.30);

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

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: all 0.35s var(--ease-out);
    --transition-fast: all 0.2s var(--ease-out);

    /* ── Layout ── */
    --container-max: 1280px;
    --container-pad: 24px;
}