/**
 * Design Tokens V7 — مطابخ الماسة الألمانية
 * ═══════════════════════════════════════════════════
 * SINGLE SOURCE OF TRUTH for ALL design values.
 * 
 * Theme: Light Luxury + Night Blue Accents
 * Supports: Light Mode (default) + Dark Mode (system + manual)
 * - Light cream backgrounds for content readability
 * - Night Blue (deep navy) for hero, footer, CTA sections
 * - Warm Gold accent throughout
 * - Arabic-first RTL typography
 * - WCAG AA contrast compliance
 *
 * Import order:
 *   1. design-tokens.css  ← THIS FILE
 *   2. style.css          ← Components & layouts
 */

:root {
  /* ═══════════════════════════════════════════════
     BRAND COLORS — Core Palette (Immutable)
     ═══════════════════════════════════════════════ */
  --color-gold:           #C9A84C;
  --color-gold-hover:     #d4b65e;
  --color-gold-dark:      #A8882E;
  --color-gold-deep:      #8B6914;
  --color-gold-muted:     rgba(201, 168, 76, 0.12);
  --color-gold-glow:      rgba(201, 168, 76, 0.22);
  --color-gold-border:    rgba(201, 168, 76, 0.30);
  --color-gold-subtle:    rgba(201, 168, 76, 0.06);

  /* Night Blue — hero / footer / dark sections */
  --color-navy:           #1a1a2e;
  --color-navy-deep:      #12121f;
  --color-navy-mid:       #24244a;
  --color-navy-light:     #2e2e54;

  /* Neutrals */
  --color-white:          #FFFFFF;
  --color-cream:          #FAF8F4;
  --color-cream-deep:     rgba(245, 243, 238, 0.65);
  --color-warm-gray:      #F2EFE8;
  --color-mid-gray:       #E8E4DB;
  --color-dark-gray:      #2C2C2C;

  /* Semantic Status */
  --color-success:        #10b981;
  --color-error:          #ef4444;
  --color-info:           #3b82f6;
  --color-warning:        #f59e0b;

  /* ═══════════════════════════════════════════════
     SEMANTIC VARIABLES — Default (Light Mode)
     ═══════════════════════════════════════════════ */
  
  /* — Backgrounds — */
  --bg-body:              var(--color-cream);
  --bg-section-light:     var(--color-white);
  --bg-section-alt:       var(--color-cream);
  --bg-card:              var(--color-white);
  --bg-card-hover:        #F7F5EF;
  --bg-input:             var(--color-white);
  --bg-nav:               rgba(255, 255, 255, 0.92);
  --bg-nav-scrolled:      rgba(255, 255, 255, 0.97);
  --bg-code:              #f5f2eb;
  --bg-tooltip:           var(--color-dark-gray);

  /* — Text — */
  --text-primary:         var(--color-dark-gray);
  --text-heading:         #1a1a1a;
  --text-body:            #333333;
  --text-muted:           #6b6b6b;
  --text-inverse:         #FFFFFF;
  --text-link:            var(--color-gold);
  --text-link-hover:      var(--color-gold-hover);

  /* — Borders — */
  --border-subtle:        rgba(0, 0, 0, 0.05);
  --border-light:         rgba(0, 0, 0, 0.08);
  --border-medium:        rgba(0, 0, 0, 0.15);
  --border-strong:        rgba(0, 0, 0, 0.25);

  /* — Shadows — */
  --shadow-sm:            0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:            0 8px 24px rgba(0,0,0,0.06);
  --shadow-lg:            0 16px 40px rgba(0,0,0,0.08);

  /* — Scrollbar — */
  --scrollbar-track:      var(--color-cream);
  --scrollbar-thumb:      var(--color-gold-dark);
  --scrollbar-thumb-hover: var(--color-gold);

  /* — Skeleton / Loading — */
  --skeleton-base:        var(--color-warm-gray);
  --skeleton-shine:       var(--color-mid-gray);

  /* — Alerts — */
  --alert-success-bg:     rgba(16, 185, 129, 0.08);
  --alert-success-border: rgba(16, 185, 129, 0.25);
  --alert-success-text:   #059669;
  --alert-error-bg:       rgba(239, 68, 68, 0.08);
  --alert-error-border:   rgba(239, 68, 68, 0.25);
  --alert-error-text:     #dc2626;
  --alert-info-bg:        rgba(59, 130, 246, 0.08);
  --alert-info-border:    rgba(59, 130, 246, 0.25);
  --alert-info-text:      #2563eb;

  /* — Blog / Article — */
  --article-bg:           var(--color-white);
  --article-text:         #2c2c2c;
  --article-line-height:  2;
  --toc-bg:               var(--color-cream);
  --toc-border:           var(--border-light);
  --sidebar-bg:           var(--color-white);
  --comment-bg:           var(--color-white);

  /* — Footer Wave — */
  --footer-wave-fill:     var(--color-navy-deep);
  --footer-wave-from:     var(--bg-body);

  /* — Hover / Interactive Overlays — */
  --hover-overlay:        rgba(0, 0, 0, 0.02);
  --active-overlay:       rgba(0, 0, 0, 0.05);
  --focus-ring:           0 0 0 3px var(--color-gold-muted);

  /* — Selection — */
  --selection-bg:         var(--color-gold);
  --selection-text:       var(--color-white);

  /* — Tag / Badge — */
  --tag-bg:               var(--color-cream);
  --tag-text:             var(--text-heading);
  --tag-border:           var(--border-medium);
  --tag-hover-bg:         var(--color-gold);
  --tag-hover-text:       var(--color-navy-deep);
}

/* ═══════════════════════════════════════════════
   LIGHT MODE — Explicit Override
   ═══════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg-body:              var(--color-cream);
  --bg-section-light:     var(--color-white);
  --bg-section-alt:       var(--color-cream);
  --bg-card:              var(--color-white);
  --bg-card-hover:        #F7F5EF;
  --bg-input:             var(--color-white);
  --bg-nav:               rgba(255, 255, 255, 0.92);
  --bg-nav-scrolled:      rgba(255, 255, 255, 0.97);
  --bg-code:              #f5f2eb;

  --text-primary:         var(--color-dark-gray);
  --text-heading:         #1a1a1a;
  --text-body:            #333333;
  --text-muted:           #6b6b6b;
  --text-inverse:         #FFFFFF;

  --border-subtle:        rgba(0, 0, 0, 0.05);
  --border-light:         rgba(0, 0, 0, 0.08);
  --border-medium:        rgba(0, 0, 0, 0.15);
  --border-strong:        rgba(0, 0, 0, 0.25);

  --shadow-sm:            0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:            0 8px 24px rgba(0,0,0,0.06);
  --shadow-lg:            0 16px 40px rgba(0,0,0,0.08);

  --scrollbar-track:      var(--color-cream);
  --scrollbar-thumb:      var(--color-gold-dark);
  --scrollbar-thumb-hover: var(--color-gold);

  --skeleton-base:        var(--color-warm-gray);
  --skeleton-shine:       var(--color-mid-gray);

  --alert-success-bg:     rgba(16, 185, 129, 0.08);
  --alert-success-border: rgba(16, 185, 129, 0.25);
  --alert-success-text:   #059669;
  --alert-error-bg:       rgba(239, 68, 68, 0.08);
  --alert-error-border:   rgba(239, 68, 68, 0.25);
  --alert-error-text:     #dc2626;

  --article-bg:           var(--color-white);
  --article-text:         #2c2c2c;
  --toc-bg:               var(--color-cream);
  --sidebar-bg:           var(--color-white);
  --comment-bg:           var(--color-white);

  --footer-wave-from:     var(--bg-body);

  --hover-overlay:        rgba(0, 0, 0, 0.02);
  --active-overlay:       rgba(0, 0, 0, 0.05);

  --tag-bg:               var(--color-cream);
  --tag-text:             var(--text-heading);
  --tag-border:           var(--border-medium);
}

/* ═══════════════════════════════════════════════
   DARK MODE — Full Override
   ═══════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* — Backgrounds — */
  --bg-body:              #0f0f1a;
  --bg-section-light:     #161625;
  --bg-section-alt:       #1a1a2e;
  --bg-card:              #1e1e35;
  --bg-card-hover:        #26264a;
  --bg-input:             rgba(255, 255, 255, 0.05);
  --bg-nav:               rgba(15, 15, 26, 0.95);
  --bg-nav-scrolled:      rgba(15, 15, 26, 0.98);
  --bg-code:              rgba(255, 255, 255, 0.06);
  --bg-tooltip:           #2a2a48;

  /* — Text (WCAG AA compliant) — */
  --text-primary:         #e8e6e3;
  --text-heading:         #f0ede8;
  --text-body:            #c8c5be;
  --text-muted:           #8a8780;
  --text-inverse:         var(--color-dark-gray);
  --text-link:            var(--color-gold-hover);
  --text-link-hover:      #e0c56a;

  /* — Borders — */
  --border-subtle:        rgba(255, 255, 255, 0.04);
  --border-light:         rgba(255, 255, 255, 0.07);
  --border-medium:        rgba(255, 255, 255, 0.12);
  --border-strong:        rgba(255, 255, 255, 0.20);

  /* — Shadows — */
  --shadow-sm:            0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:            0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:            0 16px 40px rgba(0,0,0,0.45);

  /* — Scrollbar — */
  --scrollbar-track:      #0f0f1a;
  --scrollbar-thumb:      rgba(201, 168, 76, 0.4);
  --scrollbar-thumb-hover: var(--color-gold);

  /* — Skeleton / Loading — */
  --skeleton-base:        rgba(255, 255, 255, 0.04);
  --skeleton-shine:       rgba(255, 255, 255, 0.08);

  /* — Alerts — */
  --alert-success-bg:     rgba(16, 185, 129, 0.12);
  --alert-success-border: rgba(16, 185, 129, 0.30);
  --alert-success-text:   #34d399;
  --alert-error-bg:       rgba(239, 68, 68, 0.12);
  --alert-error-border:   rgba(239, 68, 68, 0.30);
  --alert-error-text:     #f87171;
  --alert-info-bg:        rgba(59, 130, 246, 0.12);
  --alert-info-border:    rgba(59, 130, 246, 0.30);
  --alert-info-text:      #60a5fa;

  /* — Blog / Article — */
  --article-bg:           #1e1e35;
  --article-text:         #c8c5be;
  --toc-bg:               rgba(255, 255, 255, 0.03);
  --toc-border:           rgba(255, 255, 255, 0.08);
  --sidebar-bg:           #1e1e35;
  --comment-bg:           #1e1e35;

  /* — Footer Wave — */
  --footer-wave-from:     var(--bg-body);

  /* — Hover / Interactive Overlays — */
  --hover-overlay:        rgba(255, 255, 255, 0.03);
  --active-overlay:       rgba(255, 255, 255, 0.06);
  --focus-ring:           0 0 0 3px rgba(201, 168, 76, 0.35);

  /* — Selection — */
  --selection-bg:         var(--color-gold-dark);
  --selection-text:       var(--color-white);

  /* — Tag / Badge — */
  --tag-bg:               rgba(255, 255, 255, 0.06);
  --tag-text:             #e8e6e3;
  --tag-border:           rgba(255, 255, 255, 0.12);
  --tag-hover-bg:         var(--color-gold);
  --tag-hover-text:       var(--color-navy-deep);
}

/* ═══════════════════════════════════════════════
   SYSTEM PREFERENCE FALLBACK
   (When no data-theme is set and JS fails)
   ═══════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-body:              #0f0f1a;
    --bg-section-light:     #161625;
    --bg-section-alt:       #1a1a2e;
    --bg-card:              #1e1e35;
    --bg-card-hover:        #26264a;
    --bg-input:             rgba(255, 255, 255, 0.05);
    --bg-nav:               rgba(15, 15, 26, 0.95);
    --bg-nav-scrolled:      rgba(15, 15, 26, 0.98);
    --bg-code:              rgba(255, 255, 255, 0.06);

    --text-primary:         #e8e6e3;
    --text-heading:         #f0ede8;
    --text-body:            #c8c5be;
    --text-muted:           #8a8780;
    --text-inverse:         var(--color-dark-gray);

    --border-subtle:        rgba(255, 255, 255, 0.04);
    --border-light:         rgba(255, 255, 255, 0.07);
    --border-medium:        rgba(255, 255, 255, 0.12);
    --border-strong:        rgba(255, 255, 255, 0.20);

    --shadow-sm:            0 2px 8px rgba(0,0,0,0.25);
    --shadow-md:            0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg:            0 16px 40px rgba(0,0,0,0.45);

    --scrollbar-track:      #0f0f1a;
    --scrollbar-thumb:      rgba(201, 168, 76, 0.4);
    --scrollbar-thumb-hover: var(--color-gold);

    --skeleton-base:        rgba(255, 255, 255, 0.04);
    --skeleton-shine:       rgba(255, 255, 255, 0.08);

    --alert-success-bg:     rgba(16, 185, 129, 0.12);
    --alert-success-border: rgba(16, 185, 129, 0.30);
    --alert-success-text:   #34d399;
    --alert-error-bg:       rgba(239, 68, 68, 0.12);
    --alert-error-border:   rgba(239, 68, 68, 0.30);
    --alert-error-text:     #f87171;

    --article-bg:           #1e1e35;
    --article-text:         #c8c5be;
    --toc-bg:               rgba(255, 255, 255, 0.03);
    --sidebar-bg:           #1e1e35;
    --comment-bg:           #1e1e35;

    --footer-wave-from:     #0f0f1a;

    --hover-overlay:        rgba(255, 255, 255, 0.03);
    --active-overlay:       rgba(255, 255, 255, 0.06);
    --focus-ring:           0 0 0 3px rgba(201, 168, 76, 0.35);

    --tag-bg:               rgba(255, 255, 255, 0.06);
    --tag-text:             #e8e6e3;
    --tag-border:           rgba(255, 255, 255, 0.12);
  }
}

:root {

  /* ═══════════════════════════════════════════════
     DARK SECTIONS — Hero, Footer, CTA, Testimonials
     (Always dark regardless of theme)
     ═══════════════════════════════════════════════ */
  --bg-dark:              var(--color-navy);
  --bg-dark-deep:         var(--color-navy-deep);
  --bg-dark-card:         rgba(255, 255, 255, 0.05);
  --bg-dark-card-hover:   rgba(255, 255, 255, 0.08);
  --bg-dark-overlay:      rgba(26, 26, 46, 0.85);

  --text-dark-heading:    #F5F3EE;
  --text-dark-body:       rgba(245, 243, 238, 0.78);
  --text-dark-muted:      rgba(245, 243, 238, 0.50);

  --border-dark:          rgba(255, 255, 255, 0.08);
  --border-dark-gold:     rgba(201, 168, 76, 0.30);

  /* ═══════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════ */
  --font-heading:         'Tajawal', sans-serif;
  --font-body:            'Cairo', sans-serif;
  --font-en:              'Inter', sans-serif;

  --fs-display:           clamp(2.4rem, 6vw, 4rem);
  --fs-h1:                clamp(2rem, 5vw, 3.2rem);
  --fs-h2:                clamp(1.6rem, 3.5vw, 2.4rem);
  --fs-h3:                clamp(1.2rem, 2.5vw, 1.6rem);
  --fs-h4:                clamp(1.05rem, 2vw, 1.25rem);
  --fs-body:              1rem;
  --fs-body-lg:           1.125rem;
  --fs-sm:                0.875rem;
  --fs-xs:                0.8rem;
  --fs-xxs:               0.72rem;

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

  --lh-tight:             1.3;
  --lh-snug:              1.5;
  --lh-normal:            1.75;
  --lh-relaxed:           2;

  --ls-tight:             -0.02em;
  --ls-normal:            0;
  --ls-wide:              0.04em;
  --ls-wider:             0.12em;

  /* ═══════════════════════════════════════════════
     SPACING — 4px base unit
     ═══════════════════════════════════════════════ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* Section padding (responsive via clamp) */
  --section-py:           clamp(48px, 8vw, 100px);
  --section-py-lg:        clamp(64px, 10vw, 128px);

  /* ═══════════════════════════════════════════════
     BORDER RADIUS
     ═══════════════════════════════════════════════ */
  --radius-xs:            4px;
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-2xl:           32px;
  --radius-pill:          9999px;
  --radius-circle:        50%;

  /* ═══════════════════════════════════════════════
     SHADOWS (Fixed / non-semantic)
     ═══════════════════════════════════════════════ */
  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-2xl:           0 24px 64px rgba(0, 0, 0, 0.18);
  --shadow-gold:          0 4px 20px rgba(201, 168, 76, 0.20);
  --shadow-gold-lg:       0 8px 40px rgba(201, 168, 76, 0.28);
  --shadow-gold-glow:     0 0 48px rgba(201, 168, 76, 0.15);
  --shadow-card:          var(--shadow-sm);
  --shadow-card-hover:    var(--shadow-md);

  /* Dark section shadows */
  --shadow-dark-sm:       0 2px 12px rgba(0, 0, 0, 0.30);
  --shadow-dark-md:       0 6px 32px rgba(0, 0, 0, 0.40);
  --shadow-dark-lg:       0 16px 56px rgba(0, 0, 0, 0.50);

  /* ═══════════════════════════════════════════════
     GRADIENTS
     ═══════════════════════════════════════════════ */
  --gradient-gold:        linear-gradient(135deg, var(--color-gold-hover) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
  --gradient-gold-text:   linear-gradient(135deg, var(--color-gold-hover), var(--color-gold), var(--color-gold-dark));
  --gradient-hero:        linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy) 50%, var(--color-navy-mid) 100%);
  --gradient-cta:         linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  --gradient-footer:      linear-gradient(180deg, var(--color-navy-deep) 0%, #0a0a15 100%);
  --gradient-dark-overlay: linear-gradient(to top, rgba(26, 26, 46, 0.95) 0%, rgba(26, 26, 46, 0.40) 100%);
  --gradient-shimmer:     linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);

  /* ═══════════════════════════════════════════════
     TRANSITIONS & EASING
     ═══════════════════════════════════════════════ */
  --ease:                 cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:             cubic-bezier(0, 0, 0.2, 1);
  --ease-in:              cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:          cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --duration-fast:        0.15s;
  --duration-base:        0.25s;
  --duration-slow:        0.4s;
  --duration-slower:      0.6s;

  --transition-base:      all var(--duration-base) var(--ease);
  --transition-fast:      all var(--duration-fast) var(--ease);
  --transition-slow:      all var(--duration-slow) var(--ease);

  /* Theme-specific transition for smooth switching */
  --theme-transition:     background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;

  /* ═══════════════════════════════════════════════
     Z-INDEX LAYERS
     ═══════════════════════════════════════════════ */
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-navbar:             1000;
  --z-overlay:            1100;
  --z-mobile-nav:         1200;
  --z-lightbox:           9000;
  --z-toast:              9500;
  --z-progress:           9900;
  --z-skip-link:          10000;

  /* ═══════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════ */
  --container-max:        1280px;
  --container-wide:       1440px;
  --container-narrow:     800px;
  --container-padding:    clamp(16px, 4vw, 32px);
  --navbar-h:             72px;
  --navbar-h-scrolled:    60px;
  --topbar-h:             36px;

  /* ═══════════════════════════════════════════════
     COMPONENT TOKENS
     ═══════════════════════════════════════════════ */
  /* Buttons */
  --btn-py:               14px;
  --btn-px:               32px;
  --btn-radius:           var(--radius-pill);
  --btn-font-size:        var(--fs-sm);
  --btn-font-weight:      var(--fw-bold);

  /* Cards */
  --card-radius:          var(--radius-lg);
  --card-padding:         var(--sp-6);
  --card-border:          1px solid var(--border-light);
  --card-bg:              var(--bg-card);

  /* Forms */
  --input-radius:         var(--radius-md);
  --input-border:         1px solid var(--border-medium);
  --input-py:             14px;
  --input-px:             16px;
  --input-font-size:      var(--fs-body);

  /* ═══════════════════════════════════════════════
     BACKWARD COMPATIBILITY ALIASES
     ═══════════════════════════════════════════════ */
  --gold:                 var(--color-gold);
  --gold-hover:           var(--color-gold-hover);
  --gold-dark:            var(--color-gold-dark);
  --gold-light:           var(--color-gold-muted);
  --gold-glow:            var(--color-gold-glow);
  --gold-border:          var(--color-gold-border);
  --gold-subtle:          var(--color-gold-subtle);

  --bg-primary:           var(--bg-body);
  --bg-secondary:         var(--bg-section-alt);
  --bg-root:              var(--bg-body);
  --bg-overlay:           var(--bg-dark-overlay);

  --text-secondary:       var(--text-body);
  --text-dark:            var(--color-dark-gray);

  --border-card:          var(--border-light);
  --border-gold:          var(--color-gold-border);

  --font-main:            var(--font-body);
  --r-xs:                 var(--radius-xs);
  --r-sm:                 var(--radius-sm);
  --r-md:                 var(--radius-md);
  --r-lg:                 var(--radius-lg);
  --r-xl:                 var(--radius-xl);
  --r-pill:               var(--radius-pill);

  --shadow-1:             var(--shadow-sm);
  --shadow-2:             var(--shadow-md);
  --shadow-3:             var(--shadow-lg);

  --t-fast:               var(--duration-fast);
  --t-base:               var(--duration-base);
  --t-slow:               var(--duration-slow);
  --lh-tight-alias:       var(--lh-tight);
  --lh-snug-alias:        var(--lh-snug);
  --lh-normal-alias:      var(--lh-normal);
  --lh-relaxed-alias:     var(--lh-relaxed);
}