/* ============================================================================
   WSE Design Tokens — single source of truth for the exam-prep platform.
   Every app (Hub, IELTS, TOEFL, TOEIC, Practice, Admin) links this file and
   aliases its local CSS variables to these tokens, so brand colour, type,
   spacing and radius live in ONE place instead of drifting per app.

   Canonical brand values verified against the official WSE PowerPoint theme
   (navy #003359, red #f12c3e) — the on-brand IELTS/Practice apps already used
   them; TOEFL/TOEIC/Hub/Admin had drifted to #0a4f8f / #12284b and are now
   corrected here.

   This is a stop-gap toward full WSE Design System component adoption
   (see docs/design-system-adoption.md). Change a value here, not in an app.
   ============================================================================ */
:root{
  /* ---- Brand ---- */
  --wse-navy:#003359;          /* primary brand / primary button / links      */
  --wse-navy-dark:#0c2541;     /* hover, headings                              */
  --wse-navy-light:#e9eef6;    /* pale navy tint background                    */
  --wse-red:#f12c3e;           /* brand accent                                 */
  --wse-red-dark:#c0202d;
  --wse-red-tint:#fdeceb;      /* pale red background                          */
  --wse-teal:#098198;          /* secondary accent                             */

  /* ---- Status ---- */
  --wse-success:#0e8345;   --wse-success-bg:#e6f4ec;
  --wse-danger:#b02a37;    --wse-danger-bg:#fdeaea;   /* error / wrong answer  */
  --wse-warning:#b7791f;   --wse-warning-bg:#fdf6e3;
  --wse-warn-strong:#ffab00;

  /* ---- Neutrals ---- */
  --wse-ink:#0c2541;       --wse-muted:#546e7a;
  --wse-line:#dde2ea;      --wse-paper:#f4f6f9;
  --wse-card:#ffffff;      --wse-white:#ffffff;

  /* ---- Type ---- */
  --wse-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wse-font-serif:"Iowan Old Style",Georgia,"Times New Roman",serif;

  /* ---- Radius & spacing ---- */
  --wse-radius-sm:6px;  --wse-radius:8px;  --wse-radius-lg:14px;
  --wse-space-1:4px;  --wse-space-2:8px;  --wse-space-3:12px;
  --wse-space-4:16px; --wse-space-5:20px; --wse-space-6:24px;
}