/**
 * Portal design tokens — colors, typography, spacing primitives, shadows.
 * Loaded first, on every portal page. Keep this file free of selectors
 * beyond :root so it stays a pure token source.
 *
 * Unified breakpoints used across the portal stylesheets:
 *   - 1180px — desktop nav collapses to the mobile drawer
 *   - 760px  — phone layout kicks in
 *   - 420px  — small phones
 */
:root {
    --maroon: #6d0e0e;
    --maroon-deep: #4b0e0e;
    --maroon-soft: #800000;
    --gold: #c5a059;
    --gold-deep: #a9844f;
    --gold-soft: #d4af37;
    --ink: #ffffff;
    --ink-soft: #cccccc;
    --muted: #a0a0a0;
    --paper: #0a0a0a;
    --paper-deep: #0e0e0e;
    --surface: #161616;
    --surface-raised: #1c1c1c;
    --white: #ffffff;
    --line: rgba(197, 160, 89, 0.14);
    --line-strong: rgba(197, 160, 89, 0.26);
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 28px 60px rgba(0, 0, 0, 0.55);
    --radius: 18px;
    --header-h: 84px;
    --font: "Tajawal", "Cairo", system-ui, sans-serif;
    --display: "Cairo", "Tajawal", system-ui, sans-serif;

    /* Breakpoint reference values (documentation only — media queries
       cannot consume custom properties, kept here so all portal CSS
       authors agree on the same three tiers). */
    --bp-desktop: 1180px;
    --bp-phone: 760px;
    --bp-phone-sm: 420px;
}