/* Design tokens — the single source of truth for color, type, spacing.
 *
 * Loaded BEFORE portal_base.css, staff_base.css, primitives.css. Every
 * other stylesheet in the workspace consumes these custom properties
 * rather than literal hex values. Token names are stable; values may
 * change with brand revisions.
 *
 * If you find yourself writing a literal #hex / px / px in any other
 * stylesheet, that's a missing token — add it here first.
 *
 * Mirror in tokens.json for non-CSS consumers (tkinter VoIP notifier).
 */

:root {
    /* ---- Color · base surface ---- */
    --bg: #f7f7f5;                /* page background, all surfaces */
    --surface: #ffffff;           /* cards, modals, raised areas */
    --surface-soft: #f3f4f6;      /* secondary surface (active row, hover) */
    --ink: #1f2937;               /* primary text */
    --muted: #6b7280;             /* secondary text, captions */
    --border: #e5e7eb;            /* hairline borders */
    --border-soft: #f1f5f9;       /* very faint dividers */

    /* ---- Color · patient surfaces ---- */
    /* Royal blue. Used by every /portal, /account, /book, /p, /d page. */
    --accent: #1d4ed8;
    --accent-ink: #ffffff;
    --accent-soft: #eef2ff;

    /* ---- Color · staff surfaces ---- */
    /* Teal. Used by /admin/* chrome. Replaces the four divergent staff
     * palettes (unified teal, RZ navy, Termin_Buch cyan-slate, Xray
     * bootstrap blue, VoIP coral) in the consolidated design system. */
    --accent-staff: #0f8a8a;
    --accent-staff-ink: #ffffff;
    --accent-staff-soft: #e6f3f3;

    /* ---- Color · status ---- */
    --ok: #15803d;
    --ok-soft: #dcfce7;
    --warn: #b45309;
    --warn-soft: #fef3c7;
    --err: #b91c1c;
    --err-soft: #fee2e2;
    --info: #1d4ed8;              /* alias of --accent for clarity */
    --info-soft: #eef2ff;

    /* ---- Type ---- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-arabic: "Cairo", Tahoma, Arial, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;                /* default body */
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-3xl: 36px;

    --lh-tight: 1.25;
    --lh-base: 1.6;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* ---- Spacing scale (4pt grid) ---- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Radii ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* ---- Layout · patient (centered narrow) ---- */
    --patient-wrap-max: 640px;
    --patient-logo-h: 128px;

    /* ---- Layout · staff (wide with rail) ---- */
    --staff-rail-w: 240px;
    --staff-topbar-h: 56px;
    --staff-wrap-max: 1280px;

    /* ---- Z-index scale ---- */
    --z-dropdown: 100;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-toast: 2000;
}