/* ====================================================================
   الجسر العربي — Editorial Luxury Design Tokens
   Warm Ivory, Deep Charcoal & Champagne Gold (RTL & Mobile First)
   ==================================================================== */

:root {
    /* 🏛️ Core Color Palette - Warm Ivory Luxury Foundation */
    --color-bg-main: #FAF8F5;          /* Soft Warm Ivory */
    --color-bg-surface: #FFFFFF;       /* Pure Crisp White */
    --color-bg-subtle: #F3EFEA;        /* Warm Alabaster Neutral */
    --color-bg-card: #FFFFFF;
    --color-bg-card-hover: #FCFBF9;
    --color-bg-dark: #141416;          /* Editorial Deep Obsidian */
    --color-bg-dark-surface: #1E1E22;  /* Dark Surface */
    --color-bg-glass: rgba(250, 248, 245, 0.92);
    --color-bg-glass-dark: rgba(20, 20, 22, 0.94);

    /* ✨ Champagne & Antique Gold Palette (Restrained & High-End) */
    --color-gold-50: #FAF7F0;
    --color-gold-100: #F4EEDC;
    --color-gold-200: #E6D8B5;
    --color-gold-300: #D4C08D;
    --color-gold-400: #C5AB6C;
    --color-gold-primary: #B89A5A;     /* Muted Champagne Gold */
    --color-gold-dark: #8F7234;
    --color-gold-gradient: linear-gradient(135deg, #D4C08D 0%, #B89A5A 50%, #8F7234 100%);
    --color-gold-subtle: rgba(184, 154, 90, 0.08);
    --color-gold-border: rgba(184, 154, 90, 0.22);
    --color-gold-glow: 0 4px 20px rgba(184, 154, 90, 0.15);

    /* ✒️ Typography & High-Contrast Neutrals */
    --color-text-primary: #141416;     /* Deep Obsidian Charcoal */
    --color-text-secondary: #58544E;   /* Refined Medium Neutral */
    --color-text-muted: #8E8880;       /* Soft Editorial Muted */
    --color-text-light: #F7F5F0;       /* Text on Dark */
    --color-text-gold: #967A3E;

    /* 🪟 Borders & Separators (Delicate & Clean) */
    --color-border-subtle: #ECE7E0;
    --color-border-medium: #DCD5CB;
    --color-border-dark: #2B2B30;

    /* 🟢 Functional / Status Indicators */
    --color-success: #15803D;
    --color-success-bg: #F0FDF4;
    --color-danger: #B91C1C;
    --color-danger-bg: #FEF2F2;
    --color-warning: #B45309;
    --color-warning-bg: #FFFBEB;
    --color-info: #1D4ED8;
    --color-info-bg: #EFF6FF;

    /* 🔤 Typography Stacks */
    --font-primary: 'Alexandria', 'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Alexandria', 'Playfair Display', serif, sans-serif;
    --font-serif: 'Playfair Display', 'Marcellus', serif;

    /* 📐 Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* 🌌 Elevation & Diffused Luxury Shadows */
    --shadow-sm: 0 2px 8px rgba(20, 20, 22, 0.03);
    --shadow-md: 0 6px 20px rgba(20, 20, 22, 0.05);
    --shadow-lg: 0 16px 36px rgba(20, 20, 22, 0.07);
    --shadow-card: 0 2px 14px rgba(20, 20, 22, 0.03);
    --shadow-card-hover: 0 14px 36px rgba(20, 20, 22, 0.08);
    --shadow-floating: 0 20px 48px rgba(0, 0, 0, 0.10);

    /* ⚡ Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* 📱 Layout Dimensions */
    --header-height-mobile: 64px;
    --header-height-desktop: 80px;
    --bottom-nav-height: 64px;
    --container-max-width: 1320px;
    --mobile-tap-target: 48px;
}