/*
 * MediSync design tokens (MS-WEB-020).
 * One source of truth for colour, type, spacing, radius, and depth across the
 * public site, patient account and app, staff panels, and admin.
 * Values follow AGENTS.md "Premium minimalist design rules".
 * Layouts map their local variable names (--blue, --bg, ...) onto these.
 */

@font-face {
    font-family: "Outfit";
    src: url("/fonts/outfit/Outfit-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Surfaces */
    --ms-bg: #F7F8FA;
    --ms-surface: #FFFFFF;
    --ms-surface-soft: #F1F4F8;
    --ms-surface-elevated: rgba(255, 255, 255, 0.86);
    --ms-dark: #05070A;
    --ms-dark-surface: #10141B;

    /* Text */
    --ms-text: #0B0F17;
    --ms-muted: #5E6673;
    --ms-faint: #9AA3AF;

    /* Lines */
    --ms-line: rgba(15, 23, 42, 0.08);
    --ms-line-strong: rgba(15, 23, 42, 0.14);

    /* Accent */
    --ms-blue: #2563EB;
    --ms-blue-strong: #1D4ED8;
    --ms-blue-soft: rgba(37, 99, 235, 0.10);
    --ms-blue-surface: #EEF4FF;

    /* Status: a fill shade for backgrounds and icons, and a darker text shade
       that stays readable on white and on its soft background. */
    --ms-green: #10B981;
    --ms-green-text: #047857;
    --ms-green-soft: rgba(16, 185, 129, 0.12);
    --ms-amber: #F59E0B;
    --ms-amber-text: #B45309;
    --ms-amber-soft: rgba(245, 158, 11, 0.14);
    --ms-red: #EF4444;
    --ms-red-text: #DC2626;
    --ms-red-soft: rgba(239, 68, 68, 0.10);

    /* Type */
    --ms-font: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
    --ms-weight-regular: 400;
    --ms-weight-medium: 500;
    --ms-weight-semibold: 600;
    --ms-weight-bold: 700;

    /* Spacing (4px base) */
    --ms-space-1: 4px;
    --ms-space-2: 8px;
    --ms-space-3: 12px;
    --ms-space-4: 16px;
    --ms-space-5: 20px;
    --ms-space-6: 24px;
    --ms-space-8: 32px;
    --ms-space-12: 48px;

    /* Radius */
    --ms-radius-control: 12px;
    --ms-radius-card: 20px;
    --ms-radius-card-lg: 24px;
    --ms-radius-sheet: 28px;
    --ms-radius-pill: 999px;

    /* Depth: soft only */
    --ms-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
    --ms-shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.05);

    /* Motion */
    --ms-duration: 180ms;
    --ms-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}