/* ============================================================
   DESIGN SYSTEM — Al Najm Al Thaqib
   ============================================================
   Canonical token file. Mirrors style.css :root but is enqueued
   separately so Elementor pages and custom templates can rely
   on it independently.

   Sections:
     1. Colors (Brand + Silver Metallic + Neutrals + Dark + Semantic)
     2. Typography (Fonts + Scale + Line Heights)
     3. Spacing & Layout (Scale + Section + Container)
     4. Borders & Radius
     5. Shadows
     6. Transitions
   ============================================================ */


/* ─────────────────────────────────────────────
   1. COLORS
   ───────────────────────────────────────────── */

:root {

  /* Brand */
  --najm-violet:        #5B21B6;
  --najm-violet-hover:  #4C1D95;
  --najm-violet-light:  #EDE9FE;

  /* Silver / Metallic System (BRAND SIGNATURE) */
  --najm-silver:          #94A3B8;
  --najm-silver-light:    #E2E8F0;
  --najm-silver-metallic: #94A3B8;
  --najm-silver-shine:    #CBD5E1;
  --najm-silver-deep:     #64748B;

  /* Neutrals */
  --najm-ink:           #0F172A;
  --najm-body:          #1E293B;
  --najm-muted:         #64748B;
  --najm-border:        #E2E8F0;
  --najm-surface:       #F8FAFC;
  --najm-white:         #FFFFFF;

  /* Dark Section */
  --najm-dark-bg:       #0F172A;
  --najm-dark-text:     #F1F5F9;

  /* Semantic / CTA */
  --najm-cta-bg:        #5B21B6;
  --najm-cta-text:      #FFFFFF;
  --najm-cta-hover-bg:  #4C1D95;
}


/* ─────────────────────────────────────────────
   2. TYPOGRAPHY
   ───────────────────────────────────────────── */

:root {

  /* Font Families */
  --font-en:  'Bricolage Grotesque', system-ui, sans-serif;
  --font-ar:  'IBM Plex Sans Arabic', 'Arial', sans-serif;

  /* Type Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  clamp(2.5rem, 5vw, 4rem);
  --text-hero: clamp(3rem, 7vw, 5.5rem);

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}


/* ─── English body ─── */
[lang="en"] body,
body:not([dir="rtl"]) {
  font-family: var(--font-en);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--najm-body);
}

/* ─── Arabic body ─── */
[dir="rtl"] body,
html[lang="ar"] body {
  font-family: var(--font-ar);
  font-size: 1.05rem;
  line-height: var(--leading-loose);
  color: var(--najm-body);
}

/* ─── Heading defaults ─── */
h1, h2, h3, h4, h5, h6 {
  color: var(--najm-ink);
  line-height: var(--leading-tight);
  font-weight: 700;
}

h1 { font-size: var(--text-hero); font-weight: 800; }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  font-weight: 600; }
h6 { font-size: var(--text-lg);  font-weight: 600; }

/* Arabic headings use Arabic font stack */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
.lang-ar h1, .lang-ar h2, .lang-ar h3,
.lang-ar h4, .lang-ar h5, .lang-ar h6 {
  font-family: var(--font-ar);
}


/* ─────────────────────────────────────────────
   3. SPACING & LAYOUT
   ───────────────────────────────────────────── */

:root {

  /* Base spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section padding (fluid) */
  --section-py: clamp(4rem, 8vw, 8rem);
  --section-px: clamp(1.5rem, 5vw, 5rem);

  /* Container widths */
  --container-max:  1200px;
  --container-wide: 1400px;
}


/* ─────────────────────────────────────────────
   4. BORDERS & RADIUS
   ───────────────────────────────────────────── */

:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
}


/* ─────────────────────────────────────────────
   5. SHADOWS
   NO colored shadows. NO purple glow. Neutral only.
   ───────────────────────────────────────────── */

:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.1);
}


/* ─────────────────────────────────────────────
   6. TRANSITIONS
   ───────────────────────────────────────────── */

:root {
  --ease-default: 0.2s ease;
  --ease-smooth:  0.3s ease;
  --ease-slow:    0.5s ease;
}