/* ==========================================================================
   BAR3AM — Design Tokens
   Layout/typography source: Figma "كفايات" › landing page (2475:2023)
   Colour source:            images/logo-stacked.svg — مدارس براعم الوطن

   The Figma file is drawn in the previous school's blue/green/yellow. The
   whole palette is remapped onto the three colours sampled off the logo, so
   every section re-themes from this file alone:

       #135BB0 blue    ->  #8E64AB  البنفسجي  (mark outline + Arabic wordmark)
       #E6AE0B yellow  ->  #F69645  البرتقالي (the sun)
       #63A24F green   ->  #D0709A  الوردي    (the petals)

   Do NOT add new colours here from a section file. Use these only.
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --c-primary: #FD3E00; /* البرايمرى — logo orange-red, sampled from furqan.png */
  --c-primary-dark: #CC3200;
  --c-navy:           #2A2135; /* deep panel / footer base */
  --c-navy-deep:      #171717;
  --c-yellow:         #FD3E00; /* No 2nd color in logo (only black), fallback to orange-red */
  --c-yellow-soft:    #FFE6E0;
  --c-green:          #FD3E00; /* No 3rd color in logo, fallback to orange-red */
  --c-green-soft:     #FFE6E0;

  /* Slot-for-slot replacements of the brighter literals individual Figma
     layers paint with. Same roles, brand hues. */
  --c-yellow-fig:     #FD3E00;
  --c-green-fig:      #FD3E00;
  --c-yellow-ink:     #CC3200; /* darker orange-red — link text on white */
  --c-green-ink:      #CC3200; /* darker orange-red — link text on white */
  --c-navy-fig:       #3A2F45; /* Cambridge panel gradient end stop */

  /* ---- Surfaces ------------------------------------------------------- */
  --c-bg:             #F9F7FB; /* باكجراوند */
  --c-card:           #FFFFFF; /* كارد ابيض */
  --c-line:           #EBE4F1;
  --c-line-soft:      #F3EEF7;

  /* ---- Text ----------------------------------------------------------- */
  --c-text:           #2A2135;
  --c-text-2:         #6F6480; /* نصوص/نص ثانوى */

  /* Pure-neutral ramp. The library has no greys, but the header and hero
     layers paint these literals — deriving them from --c-text tints them,
     so they are declared verbatim. */
  --c-ink-900:        #171717; /* hero lead */
  --c-ink-700:        #424242; /* hero eyebrow */
  --c-ink-600:        #5E5E5E; /* hero feature rows */
  --c-ink-500:        #5A5A5A; /* header nav links */
  --c-ink-1000:       #000000; /* hero title ink + video stage backdrop */
  --c-hairline:       #C0C0C0; /* header rule + nav separators */
  --c-text-on-dark:   #FFFFFF;
  --c-text-on-dark-2: rgba(255, 255, 255, 0.78);

  /* ---- Program card accents (Future Skills) --------------------------- */
  --c-tile-1:         #F2EAF8; /* STEAM        - purple */
  --c-tile-2:         #FDEEE1; /* الروبوتات     - orange */
  --c-tile-3:         #FBE9F0; /* البرمجة       - pink   */
  --c-tile-4:         #F2EAF8; /* ذكاء اصطناعي  - purple */
  --c-tile-5:         #FDEEE1; /* الدرونز       - orange */
  --c-tile-6:         #FBE9F0; /* رياضية        - pink   */

  /* ---- Typography ----------------------------------------------------- */
  --font: "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-h1:      36px;
  --fs-h2:      24px; /* H2 (Section Title) — Tajawal Bold 24 */
  --fs-h3:      19px;
  --fs-body-lg: 18px; /* Body(18 bold) */
  --fs-body:    16px; /* Body (16 bold) */
  --fs-sm:      14px;
  --fs-xs:      12px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.8;

  /* ---- Layout --------------------------------------------------------- */
  --container:  1152px;  /* 1280 canvas − 64px gutters */
  --gutter:     64px;
  --header-h:   144px;

  /* ---- Radii ---------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---- Shadows -------------------------------------------------------- */
  --sh-sm:   0 2px 8px rgba(253, 62, 0, 0.08);
  --sh-md:   0 8px 24px rgba(253, 62, 0, 0.12);
  --sh-lg:   0 16px 40px rgba(42, 33, 53, 0.14);
  --sh-btn:  0 8px 20px rgba(253, 62, 0, 0.28);

  /* ---- Hero wash ------------------------------------------------------- */
  /* Figma 2475:2031 — a 1280x832 rounded rect anchored at canvas y=0, i.e.
     it starts BEHIND the 144px header. .header and .hero paint the same
     gradient with the same box so the wash runs continuously from y=0.
     Figma's deepest stop measures #B8CDE7 = 30% of its navy blue over white.
     The brand purple is a much lighter hue, so 30% of it lands at #DDD1E6 —
     visibly weaker than the design. The ramp below is scaled to 45% so the
     wash carries the same weight as the Figma render, in the brand hue. */
  --grad-hero-h: 832px;
  --grad-hero: linear-gradient(
    256.8deg,
    #FFFFFF 21.74%,
    #FFF6F5 30.18%,
    #FFEBE6 43.74%,
    #FFDFD6 58.09%,
    #FFC9BB 73.82%
  );

  /* ---- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  0.18s;
  --dur:       0.3s;
  --dur-slow:  0.6s;
}