/**
 * FinchBridge Design System (VDS) — design tokens
 *
 * Single source of truth for colours, spacing, type, radius, shadow, motion.
 * Feature CSS and legacy aliases must reference these variables — do not add
 * competing :root palettes.
 */

:root {
    /* Colour palette — premium healthcare SaaS (white / indigo–violet) */
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --primary-soft: rgba(79, 70, 229, 0.1);
    --secondary: #7C3AED;
    --secondary-hover: #6D28D9;
    --secondary-soft: rgba(124, 58, 237, 0.1);
    --success: #10B981;
    --success-hover: #059669;
    --success-soft: #ecfdf5;
    --success-border: #a7f3d0;
    --warning: #F59E0B;
    --warning-hover: #D97706;
    --warning-soft: #fffbeb;
    --warning-border: #fde68a;
    --danger: #EF4444;
    --danger-hover: #DC2626;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --info: #0EA5E9;
    --info-hover: #0284C7;
    --info-soft: #f0f9ff;
    --info-border: #bae6fd;
    --accent: #8B5CF6;
    --accent-teal: #14B8A6;
    --accent-rose: #F43F5E;
    --accent-sky: #38BDF8;

    --background: #F8FAFC;
    --background-soft: #F8F9FC;
    --surface: #FFFFFF;
    --surface-muted: #F1F5F9;
    --surface-lavender: #ECE7FF;
    --surface-lavender-hover: #F4F5FB;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-subtle: #ECEEF6;

    --text-primary: #1E293B;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-inverse: #ffffff;
    --text-strong: #0F172A;
    --text-brand: #312E81;

    /* Shell / navigation (Home refresh recipes) */
    --nav-link-text: var(--text-secondary);
    --nav-link-icon: var(--text-muted);
    --nav-hover-bg: var(--surface-lavender-hover);
    --nav-hover-text: var(--text-brand);
    --nav-active-bg: var(--surface-lavender);
    --nav-active-text: var(--primary-hover);
    --nav-active-icon: var(--primary);
    --nav-min-height: 3.15rem;
    --nav-radius: 1rem;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Typography — refined, website-scale */
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: clamp(1.75rem, 3.5vw, 2.5rem);
    --font-page-title: clamp(1.25rem, 2vw, 1.5rem);
    --font-section-title: clamp(1.0625rem, 1.6vw, 1.25rem);
    --font-card-title: 0.9375rem;
    --font-body: 0.9375rem;
    --font-small: 0.8125rem;
    --font-caption: 0.6875rem;
    --font-button: 0.8125rem;
    --font-label: 0.75rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-body: 1.6;
    --line-height-relaxed: 1.7;

    /* Radius — large, soft corners */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-full: 999px;

    /* Shadows — soft, layered */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 24px 64px rgba(79, 70, 229, 0.12), 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-panel: 0 4px 18px rgba(15, 23, 42, 0.05);
    --shadow-modal: 0 24px 64px rgba(15, 23, 42, 0.16), 0 8px 24px rgba(79, 70, 229, 0.08);

    /* Touch / speak targets */
    --touch-target-min: 2.75rem;
    --speak-target-size: 4.5rem;

    /* Layout */
    --sidebar-width: 15rem;
    --topbar-height: 3rem;
    --content-max: 80rem;

    /* Motion */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Dashboard tokens */
    --dashboard-bg: var(--background);
    --dashboard-card-radius: var(--radius-lg);
    --dashboard-card-padding: 1.25rem;
    --dashboard-section-gap: 1.25rem;

    /* ---- Legacy aliases (do not introduce new hex here) ---- */
    --vb-primary: var(--primary);
    --vb-primary-dark: var(--primary-hover);
    --vb-accent: var(--background);
    --vb-text: var(--text-primary);
    --vb-border: var(--border);
    --vb-success-bg: var(--success-soft);
    --vb-error-bg: var(--danger-soft);
    --vb-ui-bg: var(--background);
    --vb-ui-surface: var(--surface);
    --vb-ui-border: var(--border);
    --vb-ui-primary: var(--primary);

    --signin-primary: var(--primary);
    --signin-primary-mid: #6366F1;
    --signin-accent: var(--accent);
    --signin-bg: var(--background);
    --signin-surface: var(--surface);
    --signin-text: var(--text-primary);
    --signin-muted: var(--text-muted);
    --signin-border: var(--border);
    --signin-shadow: var(--shadow-modal);
    --signin-max: 1400px;
    --signin-pad: 48px;
    --signin-gap: 80px;
    --signin-radius: 32px;
    --signin-radius-input: 14px;

    --fb-appt-purple: var(--primary);
    --fb-appt-purple-dark: var(--primary-hover);
    --fb-appt-purple-soft: #EEF2FF;
    --fb-appt-purple-border: #C7D2FE;
    --fb-appt-text: var(--text-strong);
    --fb-appt-muted: var(--text-muted);
    --fb-appt-border: var(--border);
    --fb-appt-success: var(--success-hover);
    --fb-appt-shadow: var(--shadow-modal);

    --fb-inbox-text: var(--text-primary);
    --fb-inbox-muted: var(--text-muted);
    --fb-inbox-soft: var(--background);
    --fb-inbox-shadow: var(--shadow-panel);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0.01ms;
    }
}