/*
 * Theme Name:   Al Najm Al Thaqib
 * Theme URI:    https://saroarabuilder.com
 * Description:  Custom child theme for Al Najm Al Thaqib Training, Consulting & Administrative Systems Center. Built on Astra with GSAP scroll experience, TranslatePress bilingual support, and a violet + silver + white design system.
 * Author:       Al Najm Al Thaqib Center
 * Author URI:   https://saroarabuilder.com
 * Template:     astra
 * Version:      1.0.0
 * License:      GNU General Public License v2 or later
 * License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  astra-child-najm
 * Tags:         bilingual, rtl-ready, consulting, training
 */


/* ============================================================
   DESIGN SYSTEM TOKENS
   ============================================================
   All CSS variables live here as the canonical source.
   design-system.css mirrors these but is enqueued for modularity.
   ============================================================ */


/* ─────────────────────────────────────────────
   PART 1: COLORS
   ───────────────────────────────────────────── */

:root {

  /* ─── Brand Colors ─── */
  --najm-violet:        #5B21B6;   /* Deep violet — PRIMARY brand color */
  --najm-violet-hover:  #4C1D95;   /* Darker on hover */
  --najm-violet-light:  #EDE9FE;   /* Very light violet — subtle backgrounds */
  --najm-silver:        #94A3B8;   /* Metallic silver — secondary accent */
  --najm-silver-light:  #E2E8F0;   /* Light silver — borders, dividers */

  /* ─── Silver / Metallic System (BRAND SIGNATURE) ─── */
  /* The brand identity is a 3D star: deep violet body + silver metallic edges */
  /* The triad is: VIOLET + SILVER + WHITE — not violet + white alone */
  --najm-silver-metallic: #94A3B8;  /* Primary metallic — icon strokes, dividers */
  --najm-silver-shine:    #CBD5E1;  /* Lighter shimmer — card borders, subtle highlights */
  --najm-silver-deep:     #64748B;  /* Darker silver — number accents, anchoring elements */

  /* ─── Neutral Scale (DOMINANT — 90% of the site) ─── */
  --najm-ink:           #0F172A;   /* Near-black — main headings */
  --najm-body:          #1E293B;   /* Dark slate — body text */
  --najm-muted:         #64748B;   /* Muted — captions, secondary text */
  --najm-border:        #E2E8F0;   /* Subtle borders */
  --najm-surface:       #F8FAFC;   /* Section backgrounds (off-white) */
  --najm-white:         #FFFFFF;   /* Pure white — cards, nav */

  /* ─── Dark Section ─── */
  --najm-dark-bg:       #0F172A;   /* For dark hero/CTA sections */
  --najm-dark-text:     #F1F5F9;   /* Text on dark backgrounds */

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


  /* ─────────────────────────────────────────────
     PART 2: TYPOGRAPHY
     ───────────────────────────────────────────── */

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

  /* ─── Scale ─── */
  --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 */
  --text-6xl:  clamp(2.5rem, 5vw, 4rem);    /* Hero sub */
  --text-hero: clamp(3rem, 7vw, 5.5rem);    /* Hero main */

  /* ─── Line Heights ─── */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;   /* Arabic body text needs more breathing room */


  /* ─────────────────────────────────────────────
     PART 3: SPACING & LAYOUT
     ───────────────────────────────────────────── */

  /* ─── Base Spacing Scale ─── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ─── Section Padding ─── */
  --section-py: clamp(4rem, 8vw, 8rem);    /* top/bottom padding per section */
  --section-px: clamp(1.5rem, 5vw, 5rem);  /* left/right padding */

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

  /* ─── Border Radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  /* NO colored shadows. NO purple glow. Neutral only. */
  --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);
}


/* ─────────────────────────────────────────────
   BASE TYPOGRAPHY
   ───────────────────────────────────────────── */

/* English typography (default) */
[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 typography */
[dir="rtl"] body,
html[lang="ar"] body {
  font-family: var(--font-ar);
  font-size: 1.05rem;       /* Arabic visually smaller at same size — bump up */
  line-height: var(--leading-loose);
  color: var(--najm-body);
}