/* ════════════════════════════════════════════════════════════════════
   ASHU DESIGN TOKENS  (see docs/DESIGN_SYSTEM.md)
   Palette derived from the ASHU logo: aqua/cyan · bright green · deep blue · white.
   Fonts are self-hosted (CSP font-src 'self'): Plus Jakarta Sans (Latin, variable)
   + IBM Plex Sans Arabic (Arabic). Both SIL OFL 1.1 – licences in /assets/fonts.
   ════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); font-weight: 700 800; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  /* ── Colour: brand ─────────────────────────────────────────────── */
  --color-primary:        #00a8d8;  /* logo aqua – fills, accents, icons (not small text) */
  --color-primary-hover:  #0096c7;
  --color-primary-strong: #00789f;  /* AA text/links & white-on-aqua buttons (5.0:1) */
  --color-primary-tint:   #e6f6fb;
  --color-primary-tint-2: #cdeffa;
  --color-secondary:        #43c11e; /* logo green – leaves, decorative */
  --color-secondary-strong: #1f7a2e; /* AA text (5.4:1), WhatsApp CTA */
  --color-secondary-tint:   #eaf7e4;
  --color-navy:     #0a3d7a;         /* headings, primary CTA, footer (10.7:1) */
  --color-navy-900: #072a55;
  --color-navy-700: #0e5aa7;

  /* ── Colour: neutrals ──────────────────────────────────────────── */
  --color-bg:          #f5f8fa;
  --color-surface:     #ffffff;
  --color-surface-2:   #eef4f7;
  --color-text:        #0e2238;
  --color-text-muted:  #4a6072;
  --color-text-subtle: #607487;      /* 4.8:1 on white, 4.5:1 on page bg */
  --color-border:        #dce5eb;
  --color-border-strong: #c5d3dc;

  /* ── Colour: feedback ──────────────────────────────────────────── */
  --color-success: #1f7a2e;  --color-success-bg: #e8f6e3;
  --color-warning: #8a5a00;  --color-warning-bg: #fff6dd;
  --color-error:   #b42318;  --color-error-bg:   #fdecec;

  /* ── Typography ────────────────────────────────────────────────── */
  --font-latin:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
  --font: var(--font-latin);
  --fs-xs: .78rem;  --fs-sm: .875rem;  --fs-base: 1rem;  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2.2rem, 1.5rem + 3vw, 3.75rem);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.6;
  --tracking-tight: -.02em;

  /* ── Layout & spacing (4px base) ───────────────────────────────── */
  --container: 1280px;
  --gutter: 16px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-y: clamp(56px, 7vw, 104px);
  --header-h: 76px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(14,34,56,.06);
  --shadow-sm: 0 1px 3px rgba(14,34,56,.06), 0 1px 2px rgba(14,34,56,.04);
  --shadow:    0 6px 18px -6px rgba(14,34,56,.10), 0 2px 6px rgba(14,34,56,.04);
  --shadow-lg: 0 24px 48px -16px rgba(10,61,122,.18), 0 4px 12px rgba(10,61,122,.06);
  --ring: 0 0 0 3px rgba(0,168,216,.45);

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms; --dur: 250ms; --dur-slow: 450ms;

  /* ── Legacy aliases (Phase 1 admin/base styles) ────────────────── */
  --aqua-50: var(--color-primary-tint); --aqua-100: var(--color-primary-tint-2); --aqua-400: #00b4e4;
  --aqua-500: var(--color-primary); --aqua-600: var(--color-primary-strong); --teal-500: #00a0c0;
  --green-300: #a0f080; --green-500: var(--color-secondary); --green-700: var(--color-secondary-strong);
  --blue-700: var(--color-navy-700); --blue-900: var(--color-navy);
  --bg: var(--color-bg); --surface: var(--color-surface); --surface-2: var(--color-surface-2);
  --border: var(--color-border); --text: var(--color-text); --text-2: var(--color-text-muted); --text-3: var(--color-text-subtle);
  --danger: var(--color-error); --danger-bg: var(--color-error-bg); --warn: var(--color-warning); --warn-bg: var(--color-warning-bg);
  --ok-bg: var(--color-success-bg); --info-bg: var(--color-primary-tint);
}
:root:lang(ar) { --font: var(--font-arabic); --lh-body: 1.75; --tracking-tight: 0; }
@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }