/*
 * BComm.net — Design Token System
 * ═══════════════════════════════════════════════════════════════════
 * PHASE 1 — READ-ONLY AFTER VALIDATION
 *
 * All design decisions live here as CSS custom properties.
 * Phases 2 and 3 consume these tokens; they never redefine them.
 * ═══════════════════════════════════════════════════════════════════
 */

:root {

  /* ── Brand Colors ──────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg-primary:       #0B0F19;
  --color-bg-secondary:     #080C15;
  --color-bg-tertiary:      #0F1525;
  --color-bg-card:          rgba(255, 255, 255, 0.04);
  --color-bg-glass:         rgba(11, 15, 25, 0.82);
  --color-bg-glass-hover:   rgba(11, 15, 25, 0.95);

  /* Electric Blue Accent */
  --color-blue:             #1E90FF;
  --color-blue-light:       #4DAAFF;
  --color-blue-glow:        rgba(30, 144, 255, 0.35);
  --color-blue-dim:         rgba(30, 144, 255, 0.15);
  --color-blue-ultra-dim:   rgba(30, 144, 255, 0.07);
  --color-blue-border:      rgba(30, 144, 255, 0.28);

  /* Desaturated Gold Accent */
  --color-gold:             #B8922A;
  --color-gold-light:       #D4A843;
  --color-gold-bright:      #E8BC55;
  --color-gold-glow:        rgba(184, 146, 42, 0.30);
  --color-gold-dim:         rgba(184, 146, 42, 0.18);
  --color-gold-border:      rgba(184, 146, 42, 0.35);

  /* Text */
  --color-text-primary:     #F0F4FF;
  --color-text-secondary:   rgba(240, 244, 255, 0.70);
  --color-text-muted:       rgba(240, 244, 255, 0.40);
  --color-text-inverse:     #0B0F19;

  /* Borders */
  --color-border-subtle:    rgba(255, 255, 255, 0.07);
  --color-border-medium:    rgba(255, 255, 255, 0.12);
  --color-border-blue:      var(--color-blue-border);
  --color-border-gold:      var(--color-gold-border);

  /* Status */
  --color-success:          #34D399;
  --color-warning:          #FBBF24;
  --color-error:            #F87171;


  /* ── Typography ────────────────────────────────────────────────── */

  /* English — Apple SF Pro stack; Inter as universal fallback */
  --font-en:      'San Francisco', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

  /* Arabic — IBM Plex Sans Arabic (loaded via Google Fonts);
     SF Pro Arabic as Apple-device system font;
     Cairo as universal fallback. No calligraphic fonts. */
  --font-ar:      'IBM Plex Sans Arabic', 'SF Pro Arabic', 'Cairo', 'Segoe UI', Tahoma, sans-serif;

  /* Arabic-specific line-height (Arabic script is taller, needs more breathing room) */
  --lh-ar:        1.80;

  /* Scale (fluid-friendly) */
  --text-xs:      0.75rem;   /*  12px */
  --text-sm:      0.875rem;  /*  14px */
  --text-base:    1rem;      /*  16px */
  --text-lg:      1.125rem;  /*  18px */
  --text-xl:      1.25rem;   /*  20px */
  --text-2xl:     1.5rem;    /*  24px */
  --text-3xl:     1.875rem;  /*  30px */
  --text-4xl:     2.25rem;   /*  36px */
  --text-5xl:     3rem;      /*  48px */

  /* Weight */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Line-height */
  --lh-tight:     1.25;
  --lh-snug:      1.375;
  --lh-normal:    1.5;
  --lh-relaxed:   1.625;


  /* ── Border Radius (Apple-Style) ───────────────────────────────── */

  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    14px;
  --radius-lg:    18px;
  --radius-card:  20px;
  --radius-card-lg: 24px;
  --radius-pill:  9999px;


  /* ── Spacing Scale ─────────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;


  /* ── Transitions ───────────────────────────────────────────────── */

  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);

  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  --transition-fast:   var(--duration-fast)   var(--ease-smooth);
  --transition-smooth: var(--duration-normal) var(--ease-smooth);
  --transition-slow:   var(--duration-slow)   var(--ease-smooth);
  --transition-bounce: var(--duration-slow)   var(--ease-bounce);


  /* ── Shadows ───────────────────────────────────────────────────── */

  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.5);

  --shadow-blue-sm:   0 0 12px rgba(30, 144, 255, 0.25);
  --shadow-blue-md:   0 0 24px rgba(30, 144, 255, 0.30);
  --shadow-blue-lg:   0 0 48px rgba(30, 144, 255, 0.20);

  --shadow-gold-sm:   0 0 12px rgba(184, 146, 42, 0.25);
  --shadow-gold-md:   0 0 24px rgba(184, 146, 42, 0.30);

  --shadow-navbar:    0 1px 0 var(--color-border-blue),
                      0 4px 24px rgba(0, 0, 0, 0.4);


  /* ── Blur ──────────────────────────────────────────────────────── */

  --blur-sm:    blur(8px);
  --blur-md:    blur(16px);
  --blur-glass: blur(20px);
  --blur-heavy: blur(40px);


  /* ── Z-Index Layers ────────────────────────────────────────────── */

  --z-base:       0;
  --z-above:      10;
  --z-dropdown:   100;
  --z-overlay:    900;
  --z-drawer:     1000;
  --z-navbar:     1100;
  --z-toast:      1200;


  /* ── Layout ────────────────────────────────────────────────────── */

  --navbar-height:   68px;
  --container-max:   1200px;
  --container-px:    var(--space-6);
  --section-py:      var(--space-20);
}


/* ── Responsive Token Overrides ─────────────────────────────────────────────

   Adjust spacing and typography for smaller screens.
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --container-px: var(--space-4);
    --section-py:   var(--space-12);
    --navbar-height: 60px;
  }
}