/* ============================================================================
   tokens.css — the single source of truth for the design system.
   Load this FIRST, before any portal palette or component file.

   It defines only *neutral* values: typography, spacing, radii, shadows,
   greys and status colours. It deliberately contains NO brand colour.
   The brand ramp (--brand-*) is supplied by a portal file:

       portal-applicant.css   blue   — everything an applicant sees
       portal-admin.css       red    — everything staff see

   Rule for every stylesheet that comes after this one: never write a raw hex
   value for a brand colour. Use var(--brand), var(--brand-dark), and so on, so
   a page can be moved between portals by swapping one <link>.
   ========================================================================== */

:root {
    /* ---- Typography ------------------------------------------------------
       --font-display is the serif used for headings and gives the institute
       its printed, academic voice. --font-body is the UI face.
       --font-arabic is prepended automatically for RTL (see components.css)
       because Source Serif has no Arabic coverage.                          */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-arabic: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;

    /* Type scale. clamp() keeps headings readable from 360px to desktop. */
    --fs-hero: clamp(24px, 4.4vw, 40px);
    --fs-h1: clamp(17px, 2.6vw, 24px);
    --fs-h2: 24px;
    --fs-h3: 19px;
    --fs-h4: 16px;
    --fs-body: 14px;
    --fs-sm: 13px;
    --fs-xs: 12px;
    --fs-label: 11px;

    /* ---- Neutrals --------------------------------------------------------
       Ink = text, paper = page background, line = borders.                  */
    --ink: #1e2632;
    --ink-soft: #4b5563;
    --ink-mute: #79839a;
    --paper: #f5f7fa;
    --surface: #ffffff;
    --line: #e4e8ee;
    --line-strong: #cfd6e0;

    /* ---- Status ----------------------------------------------------------
       Shared by both portals; these never change with the brand.            */
    --ok: #17694a;
    --ok-bg: #e8f5ef;
    --ok-line: #bfe3d2;
    --warn: #8a6100;
    --warn-bg: #fdf4e0;
    --warn-line: #f0dcae;
    --bad: #b3261e;
    --bad-bg: #fbeceb;
    --bad-line: #f2c8c5;

    /* ---- Shape -----------------------------------------------------------  */
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Elevation -------------------------------------------------------
       Shadows are tinted with the brand in the portal files; these are the
       neutral fallbacks so a component still looks right without a portal.  */
    --shadow-card: 0 14px 40px rgba(16, 26, 44, .10);
    --shadow-soft: 0 10px 30px rgba(16, 26, 44, .08);
    --shadow-cta: 0 6px 20px rgba(16, 26, 44, .28);
    --shadow-modal: 0 12px 44px rgba(0, 0, 0, .28);

    /* ---- Layout ----------------------------------------------------------  */
    --page-max: 1140px;
    --page-gutter: 24px;
    --field-height: 44px;

    /* ---- Motion ----------------------------------------------------------  */
    --t-fast: .15s ease;
}

/* Honour the operating-system preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}