/* ==========================================================
   MILX PREMIUM DESIGN SYSTEM
   variables.css
========================================================== */

:root {
    /* ===============================
   COLORS
=================================*/

    --black: #0B0B0B;
    --black-2: #111111;
    --black-3: #181818;
    --black-4: #222222;
    --white: #FFFFFF;
    --gray-100: #F8F9FA;
    --gray-200: #EEEEEE;
    --gray-300: #DDDDDD;
    --gray-400: #BBBBBB;
    --gray-500: #888888;
    --gray-600: #666666;
    --gold-dark: #8C6A12;
    --gold: #C89B2D;
    --gold-light: #D4AF37;
    --gold-bright: #F3D27A;
    --gold-soft: #FFE7A8;
    --success: #25D366;
    --danger: #D32F2F;
    --warning: #FFC107;
    --info: #03A9F4;
    /* ===============================
   MAIN THEME
=================================*/

    --c-bg: var(--black);
    --c-surface: #121212;
    --c-surface-2: #191919;
    --c-border: #2B2B2B;
    --c-text: #FFFFFF;
    --c-text-light: #F7F7F7;
    --c-text-muted: #B7B7B7;
    --c-accent: var(--gold);
    --c-accent-dark: var(--gold-dark);
    --c-accent-light: var(--gold-bright);
    /* ===============================
   GOLD GRADIENTS
=================================*/

    --gold-gradient: linear-gradient( 135deg, #8C6A12 0%, #C89B2D 25%, #F3D27A 50%, #D4AF37 75%, #9C741B 100% );
    --gold-gradient-horizontal: linear-gradient( 90deg, #8C6A12, #C89B2D, #F3D27A, #D4AF37, #9C741B );
    /* ===============================
   SHADOWS
=================================*/

    --shadow-xs: 0 2px 8px rgba(0,0,0,.08);
    --shadow-sm: 0 6px 16px rgba(0,0,0,.12);
    --shadow: 0 12px 28px rgba(0,0,0,.18);
    --shadow-lg: 0 18px 45px rgba(0,0,0,.28);
    --shadow-gold: 0 10px 30px rgba(200,155,45,.20);
    /* ===============================
   RADIUS
=================================*/

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    /* ===============================
   TRANSITIONS
=================================*/

    --transition-fast: .2s;
    --transition: .35s;
    --transition-slow: .55s;
    /* ===============================
   TYPOGRAPHY
=================================*/

    --font-display: "Cinzel", "Oswald", "Tajawal", serif;
    --font-body: "Inter", "Tajawal", sans-serif;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    /* ===============================
   SPACING
=================================*/

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    /* ===============================
   LAYOUT
=================================*/

    --container-max: 1320px;
    --navbar-height: 82px;
    --footer-padding: 80px;
}


/* ======================================
RTL Fonts
======================================*/

[dir="rtl"] {
    --font-display: "Tajawal", sans-serif;
    --font-body: "Tajawal", sans-serif;
}