/* =====================================================================
   EXAM HUB — DESIGN TOKENS
   Part of Mourad Mekki Teacher Toolkit.
   Concept: a bright exam-board look. White pages, deep ink text and one
   turquoise accent for every activity, so the whole hub reads as one
   system. Controls are "gel": glossy, slightly raised, and they press
   down when tapped. Surfaces are tinted with aqua, never grey.
   Light only, on purpose: it projects well and prints the same.
   ===================================================================== */
:root{
  /* Surfaces */
  --bg:#FFFFFF;
  --bg-soft:#F3FBFA;        /* bands and side panels */
  --bg-tint:#E4F7F5;        /* hovers, chips, selected rows */
  --bg-raised:#FFFFFF;      /* cards */
  --bg-sunken:#EAF7F6;      /* tracks, wells */
  --paper:#FFFFFF;
  --paper-fg:#14263B;
  --paper-line:#D9EDEB;
  --line:#D5EBE9;
  --line-strong:#AFD9D5;

  /* Ink */
  --fg:#0F2338;
  --fg-2:#3A4F64;
  --fg-3:#617689;

  /* Brand: turquoise, with ink, sun and coral for moments that matter */
  --teal:#13BDB3;
  --teal-bright:#5BE3D8;
  --teal-deep:#009A92;
  --teal-ink:#00716B;       /* text-safe turquoise on white */
  --teal-soft:#D8F5F2;
  --teal-tint:#EEFBFA;
  --ink:#0F2B46;            /* deep blue ink for headings and bands */
  --sun:#FFC43D;
  --sun-soft:#FFF4D4;
  --sun-ink:#8A5A00;
  --coral:#F26A43;
  --coral-soft:#FFE9E1;
  --violet:#5B3B9A;
  --violet-soft:#EEE8FA;

  /* One accent for every activity (the .p-* classes all map here) */
  --part:var(--teal-ink);
  --part-tint:var(--teal-soft);

  /* Feedback */
  --ok:#11864F;  --ok-tint:#E1F6EA;
  --bad:#C9352F; --bad-tint:#FDE9E6;
  --warn:#A86200;--warn-tint:#FFF1D9;

  /* Gel recipes: top, bottom, the "lip" under the button, and its text */
  --gel-t:#6FEADF; --gel-b:#12B7AD; --gel-lip:#07867F; --gel-ink:#03282D;
  --gelw-t:#FFFFFF; --gelw-b:#E8F7F5; --gelw-lip:#BFE3DF; --gelw-ink:#0F2338;
  --gelg-t:#7CEBA9; --gelg-b:#22B866; --gelg-lip:#138A4B; --gelg-ink:#032A15;
  --gelc-t:#FFAE92; --gelc-b:#F2724B; --gelc-lip:#C9502C; --gelc-ink:#3A0F02;
  --gels-t:#FFE58C; --gels-b:#FFBF2F; --gels-lip:#D3950A; --gels-ink:#3B2700;

  /* Interaction */
  --focus:#0A8F87;
  --selection:#C7F1EC;

  /* Elevation (turquoise-tinted, soft) */
  --shadow-1:0 1px 2px rgba(0,72,80,.07),0 1px 1px rgba(0,72,80,.04);
  --shadow-2:0 14px 30px -16px rgba(0,82,90,.28),0 3px 8px rgba(0,82,90,.06);
  --shadow-3:0 34px 70px -30px rgba(0,60,70,.38),0 8px 18px rgba(0,60,70,.07);

  /* Type */
  --font-ui:"Source Sans EH","Source Sans 3","Source Sans Pro","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-display:var(--font-ui);
  --font-read:"Source Serif EH","Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --font-ar:"Naskh EH","Noto Naskh Arabic","Traditional Arabic","Simplified Arabic","Geeza Pro",Tahoma,serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;

  --fs-xs:.8rem;
  --fs-sm:.9rem;
  --fs-base:1.0625rem;
  --fs-read:1.16rem;
  --fs-md:1.2rem;
  --fs-lg:1.45rem;
  --fs-xl:clamp(1.55rem,1.3rem + .9vw,2rem);
  --fs-2xl:clamp(1.9rem,1.4rem + 1.8vw,2.7rem);
  --fs-3xl:clamp(2.4rem,1.5rem + 3.6vw,4.4rem);

  /* Space & shape */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;
  --sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--sp-9:5.5rem;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --page-max:1760px;
  --gutter:clamp(16px,2.4vw,40px);
  --read-max:72ch;

  color-scheme:light;
}