/* ============================================================
   Your Egy Guide 2.0 — Design Tokens
   Single source of truth for the entire design system.
   Loaded FIRST, before all other UI CSS.
   ============================================================ */

:root {
    /* ── Brand Palette ────────────────────────────────── */
    /* Red Sea Teal — primary action & navigation color */
    --primary:          #0E6F7E;
    --primary-rgb:      14, 111, 126;
    --primary-hover:    #0B5C6A;
    --primary-light:    #DDF0F3;
    --primary-050:      rgba(14, 111, 126, 0.06);
    --primary-100:      rgba(14, 111, 126, 0.12);

    /* Desert Night — deep dark teal for dark surfaces & depth */
    --secondary:        #14343C;
    --secondary-rgb:    20, 52, 60;
    --secondary-hover:  #0F2A30;
    --secondary-light:  #DDE8EA;

    /* Sandstone Gold — accent, CTAs, logo highlight */
    --accent:           #C9A257;
    --accent-rgb:       201, 162, 87;
    --accent-hover:     #B08D40;
    --accent-light:     #F5EDD8;

    /* ── Semantic Colors ─────────────────────────────── */
    --success:          #0D7C3E;
    --success-light:    #ECFDF3;
    --danger:           #D93025;
    --danger-light:     #FEF2F2;
    --warning:          #E8A317;
    --warning-light:    #FFFBEB;
    --info:             #1A73E8;
    --info-light:       #EFF6FF;

    /* ── Neutrals ────────────────────────────────────── */
    --dark:             #1A1D23;
    --dark-light:       #2D3038;
    --dark-dark:        #0F1115;
    --gray-700:         #3D4150;
    --gray-600:         #4B5163;
    --gray-500:         #6C7283;
    --gray:             #6C7283;
    --gray-400:         #9CA3AF;
    --gray-300:         #C5C9D2;
    --gray-200:         #E5E7EB;
    --gray-100:         #F3F4F6;
    --gray-50:          #F9FAFB;
    --white:            #FFFFFF;

    /* ── Surfaces ────────────────────────────────────── */
    --bg:               #F7F3EA;   /* Off White — brand background */
    --bg-warm:          #F7F3EA;
    --bg-alt:           #EDE8DC;   /* slightly warmer alt section bg */
    --bg-dark:          #14343C;   /* Desert Night */
    --bg-card:          #FFFFFF;
    --body-bg:          #F7F3EA;
    --line:             #D8D0C0;
    --line-light:       #E8E2D6;
    --warm-sand:        #E3D4B6;   /* Warm Sand — brand neutral */

    /* ── Text ────────────────────────────────────────── */
    --txt-color:        #2E3133;   /* Charcoal — brand text color */
    --text-muted:       #6C7283;
    --h1-color:         #14343C;   /* Desert Night for headings */
    --a:                var(--txt-color);
    --a-hover:          var(--primary);

    /* ── Typography ──────────────────────────────────── */
    --font-main:        'Manrope', 'Tajawal', system-ui, sans-serif;
    --font-display:     'Sora', 'Tajawal', system-ui, sans-serif;
    --font-secondary:   var(--font-main);
    --font-h1:          var(--font-display);
    --bold:             700;
    --medium:           500;
    --semibold:         600;

    /* Type Scale (mobile-first, fluid) */
    --fs-display:       clamp(2rem, 5vw + 0.5rem, 3.5rem);
    --fs-h1:            clamp(1.625rem, 4vw + 0.5rem, 2.5rem);
    --fs-h2:            clamp(1.375rem, 3vw + 0.5rem, 2rem);
    --fs-h3:            1.25rem;
    --fs-h4:            1.0625rem;
    --fs-h5:            1rem;
    --fs-h6:            0.9375rem;
    --fs-lead:          1.0625rem;
    --fs-body:          1rem;
    --fs-sm:            0.875rem;
    --fs-xs:            0.75rem;

    --lh-heading:       1.2;
    --lh-body:          1.6;

    /* ── Spacing (8pt grid) ──────────────────────────── */
    --sp-1:             0.25rem;   /* 4px  */
    --sp-2:             0.5rem;    /* 8px  */
    --sp-3:             0.75rem;   /* 12px */
    --sp-4:             1rem;      /* 16px */
    --sp-5:             1.5rem;    /* 24px */
    --sp-6:             2rem;      /* 32px */
    --sp-7:             3rem;      /* 48px */
    --sp-8:             4rem;      /* 64px */
    --sp-9:             6rem;      /* 96px */

    /* ── Border Radius ───────────────────────────────── */
    --radius-xs:        6px;
    --radius-sm:        8px;
    --radius:           12px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --radius-pill:      999px;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-xs:        0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:        0 4px 12px -2px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.04);
    --shadow-lg:        0 12px 28px -6px rgba(0,0,0,.12), 0 4px 8px -4px rgba(0,0,0,.06);
    --shadow-xl:        0 20px 40px -8px rgba(0,0,0,.16);

    /* ── Gradients ───────────────────────────────────── */
    --primary-grade:    linear-gradient(135deg, #0E6F7E 0%, #14343C 100%);
    --primary-grade-h:  linear-gradient(135deg, #0B5C6A 0%, #0F2A30 100%);
    --gold-grade:       linear-gradient(135deg, #C9A257 0%, #B08D40 100%);
    --dark-grade:       linear-gradient(225deg, #14343C, #0B5C6A 90%);
    --warm-grade:       linear-gradient(180deg, #F7F3EA 0%, #EDE8DC 100%);
    --hero-overlay:     linear-gradient(180deg, rgba(20,52,60,.10) 0%, rgba(20,52,60,.45) 50%, rgba(20,52,60,.82) 100%);

    /* Legacy compat — old code references these */
    --secondary-grade:  linear-gradient(-90deg, rgba(var(--primary-rgb),.4), rgba(var(--secondary-rgb),.4));
    --secondary-grade-h:linear-gradient(90deg, rgba(var(--primary-rgb),.35), rgba(var(--secondary-rgb),.35));
    --color-grade:      var(--warm-grade);
    --color-grade-2:    linear-gradient(315deg, #F5EDD8, #F7F3EA 50%, #F5EDD8);

    /* ── Layout ──────────────────────────────────────── */
    --page-pad:         1rem;
    --wrap:             1240px;
    --header-height:    60px;
    --safe-bottom:      env(safe-area-inset-bottom, 0px);
    --safe-top:         env(safe-area-inset-top, 0px);

    /* ── Component Sizing ────────────────────────────── */
    --tap-min:          48px;
    --input-height:     3rem;
    --input-radius:     var(--radius-sm);
    --input-bg:         var(--white);
    --input-border:     1px solid var(--gray-200);
    --input-focus-border: 1px solid var(--primary);
    --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    --input-font:       var(--font-main);
    --btn-gap:          0.5em;

    --sticky-cta-h:     calc(var(--tap-min) + 1.25rem + var(--safe-bottom));

    /* ── Icon ────────────────────────────────────────── */
    --i-color:          var(--primary);

    /* ── Card Component Tokens ───────────────────────── */
    --price-strike-color:   var(--gray);
    --badge-scarcity-bg:    rgba(217, 48, 37, 0.08);
    --badge-scarcity-fg:    #B91C1C;
    --badge-certified-bg:   rgba(14, 111, 126, 0.08);
    --badge-certified-fg:   var(--primary);
    --badge-originals-bg:   rgba(201, 162, 87, 0.12);
    --badge-originals-fg:   var(--accent-hover);
    --rating-star-color:    var(--warning);

    /* ── Section Rhythm ──────────────────────────────── */
    --section-y:        2.5rem;

    /* Legacy compat */
    --third:            var(--info);
    --light:            var(--gray-50);
    --light-light:      var(--white);
    --light-dark:       var(--gray-200);
    --bg-secondary:     var(--gray-50);
    --border:           var(--line);
    --border-light:     var(--line-light);
    --box-shadow:       var(--shadow-sm);
    --box-shadow-md:    var(--shadow-md);
    --box-shadow-lg:    var(--shadow-lg);
    --box-shadow-xlg:   var(--shadow-xl);
    --red:              var(--danger);
    --section-bg:       var(--gray-50);
    --padding:          1.25rem;
    --margin:           1rem;
    --a-border:         var(--line);
    --input-padding:    10px;
    --input-margin:     9px;
}

/* ── Tablet+ ─────────────────────────────────────── */
@media (min-width: 768px) {
    :root {
        --page-pad:       1.5rem;
        --header-height:  68px;
        --section-y:      4rem;
        --fs-h3:          1.5rem;
        --fs-h4:          1.25rem;
    }
}

/* ── Desktop+ ────────────────────────────────────── */
@media (min-width: 992px) {
    :root {
        --section-y:      5rem;
        --header-height:  72px;
    }
}

/* ── Dark Mode ───────────────────────────────────── */
.dark-mode {
    --bg:               #0D1E22;   /* deep Desert Night */
    --bg-warm:          #0D1E22;
    --bg-alt:           #112429;
    --bg-card:          #14343C;
    --body-bg:          #0D1E22;
    --line:             #1E4A54;
    --line-light:       #193E47;

    --txt-color:        #E8E2D6;   /* warm off-white text */
    --text-muted:       #9CA3AF;
    --h1-color:         #F0EBE0;
    --a:                #E8E2D6;

    --gray-50:          #14343C;
    --gray-100:         #193E47;
    --gray-200:         #1E4A54;
    --bg-secondary:     #14343C;
    --section-bg:       #112429;

    --primary-light:    rgba(14, 111, 126, 0.18);
    --primary-050:      rgba(14, 111, 126, 0.10);
    --primary-100:      rgba(14, 111, 126, 0.18);
    --secondary-light:  rgba(20, 52, 60, 0.30);

    --success-light:    rgba(13, 124, 62, 0.15);
    --danger-light:     rgba(217, 48, 37, 0.15);
    --warning-light:    rgba(232, 163, 23, 0.15);
    --info-light:       rgba(26, 115, 232, 0.15);

    --input-bg:         #1A1D23;
    --input-border:     1px solid #2D3038;

    --shadow-xs:        0 1px 2px rgba(0,0,0,.20);
    --shadow-sm:        0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
    --shadow-md:        0 4px 12px -2px rgba(0,0,0,.35), 0 2px 4px -2px rgba(0,0,0,.20);
    --shadow-lg:        0 12px 28px -6px rgba(0,0,0,.45), 0 4px 8px -4px rgba(0,0,0,.25);
    --shadow-xl:        0 20px 40px -8px rgba(0,0,0,.55);

    --box-shadow:       var(--shadow-sm);
    --box-shadow-md:    var(--shadow-md);
    --box-shadow-lg:    var(--shadow-lg);
    --box-shadow-xlg:   var(--shadow-xl);

    --badge-scarcity-bg:  rgba(217, 48, 37, 0.15);
    --badge-certified-bg: rgba(14, 111, 126, 0.15);
    --badge-originals-bg: rgba(201, 162, 87, 0.15);

    color-scheme: dark;
}