/* ==========================================================================
   SHOBBAIK MALL - DESIGN TOKENS & SYSTEM VARIABLES
   Palette: Cold Luxury Gold, Sharp Obsidian Dark & Soft Silk Alabaster Light
   ========================================================================== */

:root {
  /* Brand Typography */
  --font-family-base: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Cold Gold Palette Tokens */
  --gold-300: #FDE3A6;
  --gold-400: #FCCD70;
  --gold-500: #FBB633; /* Primary Cold Gold */
  --gold-600: #D99414;
  --gold-700: #B3760C;
  --gold-800: #8C5A08;

  /* Accent Colors */
  --olive-500: #2D5A43;      /* Palestinian Olive/Earth */
  --olive-400: #3E795B;
  --terracotta-500: #C85A32; /* Palestinian Craft Terracotta */
  --emerald-success: #10B981;

  /* Gradients */
  --grad-gold-cold: #FBB633;
  --grad-gold-subtle: linear-gradient(135deg, rgba(251, 182, 51, 0.15) 0%, rgba(251, 182, 51, 0.03) 100%);
  --grad-gold-text: #FBB633;
  --grad-dark-mesh: radial-gradient(circle at 80% 20%, rgba(251, 182, 51, 0.07) 0%, transparent 50%),
                    radial-gradient(circle at 20% 80%, rgba(45, 90, 67, 0.08) 0%, transparent 60%);

  /* Spatial & UI Dimensions */
  --container-max-w: 1240px;
  --header-h: 80px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   DEFAULT: SHARP OBSIDIAN DARK MODE
   ========================================================================== */
html[data-theme="dark"],
:root {
  --theme-mode: 'dark';

  /* Surface & Backgrounds */
  --bg-body: #080C11;
  --bg-body-mesh: radial-gradient(circle at 85% 15%, rgba(251, 182, 51, 0.08) 0%, transparent 45%),
                  radial-gradient(circle at 15% 75%, rgba(45, 90, 67, 0.09) 0%, transparent 55%),
                  #080C11;
  --bg-surface: rgba(16, 23, 33, 0.72);
  --bg-surface-elevated: rgba(22, 31, 45, 0.85);
  --bg-glass-card: rgba(16, 24, 34, 0.65);
  --bg-input: rgba(12, 18, 26, 0.8);

  /* Borders & Dividers */
  --border-glass: rgba(251, 182, 51, 0.2);
  --border-glass-hover: rgba(251, 182, 51, 0.45);
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* Text & Labels */
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-subtle: #64748B;
  --text-on-gold: #0A0E14;
  --text-badge: var(--gold-300);

  /* Shadows & Glows */
  --card-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.1);
  --card-shadow-hover: 0 24px 50px -12px rgba(0, 0, 0, 0.85), 0 0 24px rgba(251, 182, 51, 0.2);
  --glow-gold: 0 0 30px rgba(251, 182, 51, 0.25);
  --glow-gold-intense: 0 0 45px rgba(251, 182, 51, 0.4);

  /* Section-Specific Theming */
  --marquee-bg: #04070B;
  --marquee-border: rgba(251, 182, 51, 0.15);
  --phone-frame-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(251, 182, 51, 0.18);
}

/* ==========================================================================
   SOFT SILK ALABASTER LIGHT MODE
   ========================================================================== */
html[data-theme="light"] {
  --theme-mode: 'light';

  /* Surface & Backgrounds */
  --bg-body: #F7F6F2;
  --bg-body-mesh: radial-gradient(circle at 85% 15%, rgba(251, 182, 51, 0.08) 0%, transparent 50%),
                  radial-gradient(circle at 15% 75%, rgba(45, 90, 67, 0.06) 0%, transparent 50%),
                  #F7F6F2;
  --bg-surface: rgba(255, 255, 255, 0.88);
  --bg-surface-elevated: rgba(255, 255, 255, 0.98);
  --bg-glass-card: rgba(255, 255, 255, 0.82);
  --bg-input: #FFFFFF;

  /* Borders & Dividers */
  --border-glass: rgba(251, 182, 51, 0.25);
  --border-glass-hover: rgba(251, 182, 51, 0.6);
  --border-subtle: rgba(15, 23, 42, 0.08);

  /* Text & Labels */
  --text-main: #0F172A;
  --text-muted: #475569;
  --text-subtle: #64748B;
  --text-on-gold: #0A0E14;
  --text-badge: #856404;

  /* Shadows & Glows */
  --card-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(251, 182, 51, 0.06);
  --card-shadow-hover: 0 24px 50px -12px rgba(15, 23, 42, 0.14), 0 0 25px rgba(251, 182, 51, 0.18);
  --glow-gold: 0 0 25px rgba(251, 182, 51, 0.18);
  --glow-gold-intense: 0 0 35px rgba(251, 182, 51, 0.3);

  /* Section-Specific Theming (Marquee has deep contrasting tone in light mode) */
  --marquee-bg: #141A22;
  --marquee-border: rgba(251, 182, 51, 0.25);
  --phone-frame-shadow: 0 25px 60px rgba(15, 23, 42, 0.2), 0 0 35px rgba(251, 182, 51, 0.15);
}