/* ==========================================================================
   إحراز — Design Tokens
   Brand = the logo: charcoal ink on ivory. Gold says "you are here / do this next".
   Every section owns one bright colour (its menu icon, its cards, its numbers).
   Surfaces are separated by a tone step or a soft line — no shadows at rest,
   no dark outlines, no gradients (overlays such as menus and dialogs may float).
   ========================================================================== */

/* Alexandria — static weights, subset to Arabic + Latin, WOFF2 (~29 KB each; was one 322 KB variable TTF).
   font-display: block — text waits (briefly) for Alexandria instead of flashing a fallback font. */
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Alexandria"; src: url("fonts/Alexandria-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: block; }
/* handwriting for the landing page doodles ("Hello!"); self-hosted, latin only — downloaded only where it is used */
@font-face { font-family: "Caveat"; src: url("fonts/Caveat-SemiBold-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand: the logo's charcoal does text AND primary buttons; ivory sits on it ---- */
  --accent: #171917;
  --accent-hover: #2e302c;
  --accent-press: #0b0c0b;
  --accent-soft: #efede7;          /* quiet selected fills behind ink text */
  --on-accent: #f5f3ee;            /* ivory: text on ink buttons, the logo monogram */

  /* ---- Gold: "you are here / do this next" ---- */
  --highlight: #f2c94c;            /* selected item, next step, highlighted words — never a button */
  --highlight-soft: #fff3cc;       /* gold tint for a featured card */
  --highlight-line: #f3dc8f;       /* the line around a gold-tint card */
  --highlight-edge: #c99a1e;       /* deep gold for thin edge marks — never a fill */
  --terracotta: #dc2626;           /* wrong answers and error marks only */

  /* ---- Neutrals (one warm-neutral family) ---- */
  --ink: #171917;                  /* headings and body text (16.8:1 on the page) */
  --ink-2: #3a3d3a;                /* secondary body */
  --muted: #565954;                /* helper text, metadata (7:1): a touch darker so secondary lines read clearly */
  --faint: #a5a8a2;                /* placeholders and disabled only — never text people need to read */
  --border: #ebe9e3;               /* lines inside cards */
  --border-strong: #dedbd3;        /* card, nav and input outlines */
  --black: #000000;                /* store badges only */

  /* ---- Surfaces ---- */
  --canvas: #faf9f6;               /* L0 page: white with a touch of the logo's ivory */
  --surface: #ffffff;              /* L1 cards, nav, inputs */
  --lilac: #f3f1ec;                /* L2 quiet fills: hovers, table heads, pills */

  /* ---- Section colours: icon colour + card tint (+ the line around a tinted card) ---- */
  --c-reading: #2563eb;    --t-reading: #e3edff;    --l-reading: #b8cffb;
  --c-listening: #7c3aed;  --t-listening: #efe7ff;  --l-listening: #d6c4fb;
  --c-grammar: #ea580c;    --t-grammar: #ffeadb;    --l-grammar: #fbc9a6;
  --c-writing: #db2777;    --t-writing: #fde6f0;    --l-writing: #f6b8d3;
  --c-speaking: #15803d;   --t-speaking: #dcf6e4;   --l-speaking: #a8e3bb;
  --c-vocab: #0d9488;      --t-vocab: #d5f4ef;      --l-vocab: #a7e3d9;
  --c-plan: #a16207;       --t-plan: #fff3cc;       --l-plan: #f3dc8f;
  --c-exam: #dc2626;       --t-exam: #fde5e5;       --l-exam: #f7b9b9;

  /* ---- Card tints (older names, mapped onto the section families) ---- */
  --tint-cyan: var(--t-vocab);       /* teal */
  --tint-magenta: var(--t-listening);/* lavender */
  --tint-violet: var(--t-speaking);  /* green — also "right answer" */
  --tint-peach: var(--t-grammar);    /* peach */

  /* ---- Type ---- */
  --font: "Alexandria", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;   /* English micro-labels */

  --text-caption: 12px;    --lh-caption: 1.6;
  --text-sm: 14px;         --lh-sm: 1.65;
  --text-body: 16px;       --lh-body: 1.75;   /* Arabic needs more leading than Latin */
  --text-sub: 17px;        --lh-sub: 1.65;
  --text-h3: 20px;         --lh-h3: 1.45;
  --text-h2: 32px;         --lh-h2: 1.35;
  --text-display: 48px;    --lh-display: 1.3;    /* Arabic display never below 1.25: hamza and dots need room */

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;   /* max for headings */
  --w-bold: 700;       /* feature-card labels, wordmark */
  --w-display: 700;    /* display + section headlines: bold but not heavy (no letter-spacing — it breaks Arabic joins) */

  /* ---- Spacing (8px base) ---- */
  --s-4: 4px;  --s-8: 8px;  --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-120: 120px;

  --side-w: 84px;      /* the desktop icon bar */
  --page-max: 1200px;
  --gutter: 24px;
  --section-gap: 96px;

  /* ---- Radius ---- */
  --r-input: 10px;
  --r-button: 12px;    /* every button */
  --r-card: 18px;      /* cards, inner panels */
  --r-panel: 24px;     /* big cards, frames, nav */
  --r-feature: 24px;   /* coloured feature cards */
  --r-pill: 9999px;    /* tags, pills, badges */

  /* ---- Elevation: nothing at rest casts a shadow; only real overlays float ---- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-float: 0 12px 32px -12px rgba(23, 25, 23, 0.22);   /* menus, popovers, dialogs, toasts */
  --shadow-glow: none;
  --shadow-hairline: none;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* reveals, fills */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* pops, ticks, badges */
  --dur-fast: 150ms;    /* color, border */
  --dur: 300ms;         /* hover lifts */
  --dur-slow: 650ms;    /* reveals */
  --stagger: 70ms;      /* delay between siblings */
}

@media (max-width: 720px) {
  :root {
    --text-display: 32px;
    --text-h2: 24px;
    --text-h3: 18px;
    --gutter: 16px;
    --section-gap: 72px;
  }
}