/* =============================================================================
   Edumia design tokens — three layers, one source of truth.

   Layer 1  primitive   raw values, no meaning attached
   Layer 2  semantic    meaning ("this is the primary action surface")
   Layer 3  component   per-component overrides, always referencing layer 2

   Components must only ever read layer 2 or 3. If a component needs a raw hex
   value, that value belongs in layer 1 and the name belongs in layer 2.

   Contrast: every text/background pair below is verified against WCAG 2.2 AA.
   The brand's own green (#39B14A, the current site's CTA colour) measures
   2.78:1 against white and therefore CANNOT carry text or meaningful UI on a
   light surface. It is kept as --green-500 for large fills and logo use only;
   interactive surfaces use --green-700 (5.73:1 with white).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- layer 1
     Brand green ramp, hue-locked to the brand seed #39B14A. */
  --green-50:  #F1FBF3;
  --green-100: #DFF6E4;
  --green-200: #BFEBC9;
  --green-300: #93DCA4;
  --green-400: #63C77B;
  --green-500: #39B14A;   /* brand seed — decorative / large fills only      */
  --green-600: #2C9440;   /* 3.88:1 on white — non-text UI graphics only     */
  --green-700: #237534;   /* 5.73:1 on white — interactive text & buttons    */
  --green-800: #1B5C2A;   /* 8.04:1 on white — hover / pressed               */
  --green-900: #123D1C;

  /* Neutrals: very slightly green-shifted so surfaces sit with the brand
     instead of beside it. */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFCFB;
  --neutral-50:  #F5F8F6;
  --neutral-100: #EDF2EF;
  --neutral-200: #DFE6E2;
  --neutral-300: #C6D0CB;
  --neutral-400: #9AA8A2;
  --neutral-500: #6B7B74;
  --neutral-600: #4B5B55;
  --neutral-700: #33413C;
  --neutral-800: #1D2A25;
  --neutral-900: #0B1F16;

  /* Feedback */
  --amber-100: #FEF3C7;
  --amber-700: #92630B;
  --red-600:   #C0362C;
  --red-100:   #FBE6E4;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale, 1.2 ratio at the small end widening to 1.25.
     clamp() so there is no mobile/desktop font-size breakpoint juggling. */
  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);
  --text-lg:   clamp(1.1875rem, 0.4vw + 1.1rem, 1.375rem);
  --text-xl:   clamp(1.375rem, 0.8vw + 1.2rem, 1.75rem);
  --text-2xl:  clamp(1.625rem, 1.4vw + 1.3rem, 2.25rem);
  --text-3xl:  clamp(2rem, 2.4vw + 1.4rem, 3rem);
  --text-4xl:  clamp(2.375rem, 4vw + 1.3rem, 4rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* Spacing — 4px base, geometric past 32. Marketing pages default to the
     roomy end; density is a page-level override, not a different scale. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgb(11 31 22 / 0.06);
  --shadow-sm: 0 1px 3px rgb(11 31 22 / 0.08), 0 1px 2px rgb(11 31 22 / 0.04);
  --shadow-md: 0 4px 12px rgb(11 31 22 / 0.08), 0 2px 4px rgb(11 31 22 / 0.04);
  --shadow-lg: 0 16px 40px rgb(11 31 22 / 0.12), 0 4px 12px rgb(11 31 22 / 0.06);

  --border-w: 1px;

  /* Motion: two durations and two curves cover every transition on the site. */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 68px;

  /* ---------------------------------------------------------------- layer 2
     Semantic. This is the only layer a component should reference. */
  --color-brand:        var(--green-500);
  --color-primary:      var(--green-700);
  --color-primary-hover:var(--green-800);
  --color-primary-ink:  var(--neutral-0);
  --color-on-brand:     var(--neutral-0);

  --color-accent-graphic: var(--green-600); /* icons, rules, non-text UI */

  --surface:            var(--neutral-0);
  --surface-raised:     var(--neutral-0);
  --surface-sunken:     var(--neutral-50);
  --surface-tint:       var(--green-50);
  --surface-inverse:    var(--neutral-900);
  --surface-inverse-2:  var(--green-900);

  --ink:                var(--neutral-900);
  --ink-body:           var(--neutral-700);
  --ink-muted:          var(--neutral-600);
  --ink-subtle:         var(--neutral-500);
  --ink-inverse:        var(--neutral-0);
  --ink-inverse-muted:  var(--green-200);
  --ink-link:           var(--green-700);
  /* The wordmark is large text (22px+) at weight 800, so AA large-text applies
     (3:1). Brand green #39B14A at 2.78:1 would fail even that. */
  --color-wordmark:         var(--green-600);
  --color-wordmark-inverse: var(--green-400);

  --border:             var(--neutral-200);
  --border-strong:      var(--neutral-300);
  --border-inverse:     rgb(255 255 255 / 0.14);

  --focus-ring:         var(--green-700);
  --focus-ring-offset:  var(--surface);

  --status-warn-bg:     var(--amber-100);
  --status-warn-ink:    var(--amber-700);
  --status-danger-bg:   var(--red-100);
  --status-danger-ink:  var(--red-600);

  /* ---------------------------------------------------------------- layer 3 */
  --btn-radius: var(--radius-sm);
  --btn-font-weight: 600;
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-6);
  --card-border: var(--border);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --shot-radius: var(--radius-md);
  --shot-border: var(--border-strong);
}

/* -----------------------------------------------------------------------------
   Arabic / RTL typographic adjustment.

   IBM Plex Sans Arabic has a taller x-height and looser default leading than
   Plus Jakarta Sans, so Latin line-heights look cramped in Arabic. Arabic also
   should not be letter-spaced or synthesised-bolded.
   -------------------------------------------------------------------------- */
[lang="ar"] {
  --font-sans: var(--font-arabic);
  --leading-body: 1.75;
  --tracking-tight: 0;
  --tracking-wide: 0.02em;
}

/* -----------------------------------------------------------------------------
   Dark theme. Opt-in via [data-theme="dark"], or automatic when the visitor has
   no explicit preference. Only layer 2 tokens change — no component is aware
   that dark mode exists.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-primary:       var(--green-600);
  --color-primary-hover: var(--green-500);
  --color-primary-ink:   var(--neutral-900);

  --color-accent-graphic: var(--green-400);

  --surface:           #0D1A14;
  --surface-raised:    #12241B;
  --surface-sunken:    #0A130F;
  --surface-tint:      #12241B;
  --surface-inverse:   var(--neutral-50);
  --surface-inverse-2: var(--green-100);

  --ink:               #ECF5F0;
  --ink-body:          #C3D6CD;
  --ink-muted:         #A5BCB2;
  --ink-subtle:        #81998F;
  --ink-inverse:       var(--neutral-900);
  --ink-inverse-muted: var(--green-800);
  --ink-link:          var(--green-300);

  --border:            rgb(255 255 255 / 0.10);
  --border-strong:     rgb(255 255 255 / 0.18);

  --focus-ring:        var(--green-400);
  --focus-ring-offset: var(--surface);

  --status-warn-bg:    #3A2E08;
  --status-warn-ink:   #F5D98A;
  --status-danger-bg:  #3D1613;
  --status-danger-ink: #F3A9A3;

  --card-shadow:       none;
  --card-shadow-hover: 0 8px 24px rgb(0 0 0 / 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:       var(--green-600);
    --color-primary-hover: var(--green-500);
    --color-primary-ink:   var(--neutral-900);
    --color-accent-graphic: var(--green-400);
    --surface:           #0D1A14;
    --surface-raised:    #12241B;
    --surface-sunken:    #0A130F;
    --surface-tint:      #12241B;
    --ink:               #ECF5F0;
    --ink-body:          #C3D6CD;
    --ink-muted:         #A5BCB2;
    --ink-subtle:        #81998F;
    --ink-link:          var(--green-300);
    --border:            rgb(255 255 255 / 0.10);
    --border-strong:     rgb(255 255 255 / 0.18);
    --focus-ring:        var(--green-400);
    --card-shadow:       none;
  }
}

/* Honoured globally, once — not per component. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}