/* ==========================================================================
   OUR FUTURE — Design Tokens
   The single source of truth for the design system.
   Everything downstream (base, components, sections) consumes these variables.
   Decisions are documented inline so the system stays intentional as it scales.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. COLOR — Brand
     Emerald/jade primary: signals growth, knowledge and trust, and is
     regionally resonant (KSA) without the LMS-blue cliché. A single warm
     amber accent carries highlights, ratings and "achievement" moments.
     Scales are tuned so solid fills pass WCAG AA for their paired text.
     --------------------------------------------------------------------- */
  --brand-50:  #ecfdf6;
  --brand-100: #d2f7e7;
  --brand-200: #a7edd1;
  --brand-300: #6fddb6;
  --brand-400: #34c597;
  --brand-500: #12a87c;   /* primary interactive (on light) */
  --brand-600: #0c8765;   /* hover / pressed */
  --brand-700: #0a6b52;   /* deep */
  --brand-800: #0a5343;   /* darker surfaces */
  --brand-900: #063026;   /* darkest — dark-band background */
  --brand-950: #04211b;

  --accent-300: #ffd98a;
  --accent-400: #f7c45a;
  --accent-500: #f4b740;  /* warm amber — highlights, stars, badges */
  --accent-600: #d89216;

  --teal-400:  #22b8cf;   /* tertiary — gradients only, kept disciplined */
  --violet-400:#7c6cf5;   /* tertiary — gradients only */

  /* ---------------------------------------------------------------------
     2. COLOR — Neutrals (warm, green-tinted ink for a cohesive palette)
     --------------------------------------------------------------------- */
  --ink-900: #0a1a17;   /* primary text */
  --ink-800: #142420;
  --ink-700: #1d322c;
  --ink-600: #33473f;
  --ink-500: #4f635b;   /* secondary text — ~7:1 on white */
  --ink-400: #6d8076;   /* muted text — ~4.7:1 on white (AA body) */
  --ink-300: #9fb0a7;
  --ink-200: #c9d6cf;
  --ink-100: #e7ede9;

  --line:        #e6ebe7;  /* hairline borders */
  --line-strong: #d4ddd7;
  --bg:          #fbfcfa;  /* page — warm paper white */
  --bg-subtle:   #f4f7f4;  /* alternating section tint */
  --surface:     #ffffff;  /* cards, raised surfaces */
  --surface-2:   #f8faf8;

  /* ---------------------------------------------------------------------
     3. SEMANTIC tokens — what components actually reference.
     Indirection here lets us theme (light/dark bands, future dark mode)
     without touching component CSS.
     --------------------------------------------------------------------- */
  --color-text:        var(--ink-900);
  --color-text-soft:   var(--ink-500);
  --color-text-muted:  var(--ink-400);
  --color-heading:     var(--ink-900);
  --color-bg:          var(--bg);
  --color-surface:     var(--surface);
  --color-border:      var(--line);
  --color-primary:     var(--brand-600);
  --color-primary-hover:var(--brand-700);
  --color-on-primary:  #ffffff;
  --color-ring:        color-mix(in srgb, var(--brand-500) 55%, transparent);

  --state-success: #12a87c;
  --state-warning: #d89216;
  --state-danger:  #d2603a;
  --state-info:    #2b8bb0;

  /* ---------------------------------------------------------------------
     4. GRADIENTS & EFFECTS
     --------------------------------------------------------------------- */
  --grad-brand:  linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 100%);
  --grad-brand-deep: linear-gradient(155deg, var(--brand-800) 0%, var(--brand-600) 60%, var(--teal-400) 130%);
  --grad-warm:   linear-gradient(135deg, var(--accent-500) 0%, #ff8a5b 100%);
  --grad-mesh:
     radial-gradient(60% 80% at 12% 8%,  color-mix(in srgb, var(--brand-400) 38%, transparent) 0%, transparent 60%),
     radial-gradient(50% 70% at 92% 4%,  color-mix(in srgb, var(--teal-400)  34%, transparent) 0%, transparent 55%),
     radial-gradient(60% 90% at 78% 92%, color-mix(in srgb, var(--violet-400) 28%, transparent) 0%, transparent 60%),
     radial-gradient(50% 70% at 6% 96%,  color-mix(in srgb, var(--accent-400) 26%, transparent) 0%, transparent 55%);
  --grad-text:   linear-gradient(100deg, var(--brand-700), var(--brand-400) 55%, var(--teal-400));

  /* Soft, layered, low-opacity shadows — depth without heaviness. */
  --shadow-xs: 0 1px 2px rgba(10, 26, 23, .06);
  --shadow-sm: 0 1px 2px rgba(10, 26, 23, .06), 0 1px 1px rgba(10, 26, 23, .04);
  --shadow-md: 0 6px 16px -4px rgba(10, 26, 23, .10), 0 2px 6px -2px rgba(10, 26, 23, .06);
  --shadow-lg: 0 22px 48px -16px rgba(10, 26, 23, .20), 0 8px 18px -10px rgba(10, 26, 23, .12);
  --shadow-xl: 0 40px 80px -24px rgba(10, 26, 23, .28), 0 12px 28px -12px rgba(10, 26, 23, .16);
  --shadow-brand: 0 12px 30px -10px color-mix(in srgb, var(--brand-600) 50%, transparent);
  --ring-focus: 0 0 0 3px var(--color-ring);

  /* ---------------------------------------------------------------------
     5. TYPOGRAPHY
     Plus Jakarta Sans (Latin) + IBM Plex Sans Arabic (RTL). One geometric
     family keeps the system lean; fluid clamps remove breakpoint jumps.
     --------------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

  /* Fluid type scale (1.250 major-third-ish, tightened at the top) */
  --fs-display: clamp(2.85rem, 1.55rem + 5.4vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 1.45rem + 3.2vw, 3.5rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.1vw, 2.75rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.85vw, 1.7rem);
  --fs-h4:      clamp(1.12rem, 1.02rem + 0.45vw, 1.3rem);
  --fs-lead:    clamp(1.1rem, 1.02rem + 0.45vw, 1.3rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight:   1.06;
  --lh-snug:    1.18;
  --lh-heading: 1.22;
  --lh-body:    1.65;
  --lh-relaxed: 1.75;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.012em;
  --tracking-wide:  0.02em;
  --tracking-eyebrow: 0.14em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* ---------------------------------------------------------------------
     6. SPACE — 4px base scale. Used for margins, padding, gaps.
     --------------------------------------------------------------------- */
  --s-0: 0;
  --s-1: 0.25rem;   /* 4  */
  --s-2: 0.5rem;    /* 8  */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */
  --s-10: 8rem;     /* 128 */
  --s-11: 10rem;    /* 160 */

  /* Section rhythm — fluid vertical padding for breathing room. */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5rem);

  /* ---------------------------------------------------------------------
     7. LAYOUT
     --------------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-prose: 720px;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2rem);
  --header-h: 72px;

  /* ---------------------------------------------------------------------
     8. RADII
     --------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     9. MOTION — calm, confident easing. Durations stay short.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 680ms;

  /* ---------------------------------------------------------------------
     10. Z-INDEX scale
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* ============================================================
   Dark bands (CTA strips, footer, hero overlays). Applying the
   class re-points the semantic tokens so any component dropped
   inside inherits correct contrast automatically.
   ============================================================ */
.on-dark {
  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-soft: rgba(235, 245, 241, 0.74);
  --color-text-muted: rgba(220, 235, 230, 0.6);
  --color-heading: #ffffff;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-primary: #ffffff;
  --color-on-primary: var(--brand-900);
  color: var(--color-text);
}

/* Respect users who ask for less motion — handled globally in base.css,
   but expose a token so JS can read intent too. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; }
}