/**
 * 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 (soft white / FinchBridge purple) */
    --primary: #6D28D9;
    --primary-hover: #5B21B6;
    --primary-soft: rgba(109, 40, 217, 0.1);
    --primary-mid: #7C3AED;
    --secondary: #6366F1;
    --secondary-hover: #4F46E5;
    --secondary-soft: rgba(99, 102, 241, 0.1);
    --success: #10B981;
    --success-hover: #059669;
    --success-soft: #ecfdf5;
    --success-border: #a7f3d0;
    --success-on-soft: #065F46;
    --warning: #F59E0B;
    --warning-hover: #D97706;
    --warning-soft: #fffbeb;
    --warning-border: #fde68a;
    --warning-on-soft: #92400E;
    --danger: #EF4444;
    --danger-hover: #DC2626;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --danger-on-soft: #991B1B;
    --info: #0EA5E9;
    --info-hover: #0284C7;
    --info-soft: #f0f9ff;
    --info-border: #bae6fd;
    --info-on-soft: #075985;
    --accent: #8B5CF6;
    --accent-teal: #14B8A6;
    --accent-rose: #F43F5E;
    --accent-sky: #38BDF8;

    --background: #F8FAFC;
    --background-soft: #F1F5F9;
    --surface: #FFFFFF;
    --surface-muted: #F8FAFC;
    --surface-lavender: #EDE9FE;
    --surface-lavender-hover: #F5F3FF;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-subtle: #F1F5F9;

    /* Visual master — EHR shell + discipline accents (same v1.0; not a v2) */
    --sidebar-ink: #0F172A;
    --sidebar-ink-text: #E2E8F0;
    --sidebar-ink-muted: #94A3B8;
    --sidebar-ink-hover: rgba(148, 163, 184, 0.14);
    --sidebar-ink-active: rgba(59, 130, 246, 0.22);
    --sidebar-ink-border: rgba(148, 163, 184, 0.18);
    --discipline-speech: #3B82F6;
    --discipline-speech-soft: #EFF6FF;
    --radius-panel: 0.5rem;

    --gradient-hero: linear-gradient(118deg, #FFFFFF 0%, #FAF8FF 38%, #F3F0FF 68%, #EEF2FF 100%);
    --gradient-primary: linear-gradient(125deg, #8B5CF6 0%, #7C3AED 35%, #6D28D9 70%, #5B21B6 100%);
    --gradient-danger: linear-gradient(125deg, #FB7185 0%, #F87171 35%, #EF4444 70%, #DC2626 100%);
    --gradient-soft: linear-gradient(180deg, #FCFBFE 0%, #F7F5FB 55%, #F3F0FA 100%);

    --text-primary: #1E1B2E;
    --text-secondary: #4B455C;
    --text-muted: #6B6578;
    --text-inverse: #ffffff;
    --text-strong: #151225;
    --text-brand: #4C1D95;
    --text: var(--text-primary);

    /* Shell / navigation — screenshot-aligned active pill */
    --nav-link-text: #3F3A4D;
    --nav-link-icon: #6B6578;
    --nav-hover-bg: var(--surface-muted);
    --nav-hover-text: var(--text-strong);
    --nav-active-bg: #5B3FC4;
    --nav-active-text: #ffffff;
    --nav-active-icon: #ffffff;
    --nav-min-height: 3.25rem;
    --nav-radius: 999px;
    --nav-icon-size: 1.15rem;
    --nav-icon-slot: 1.35rem;
    --nav-link-gap: var(--space-3);
    --nav-link-pad-y: 0.65rem;
    --nav-link-pad-x: 0.9rem;
    --nav-help-size: 1.75rem;

    /* 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(2rem, 4vw, 2.75rem);
    --font-page-title: clamp(1.85rem, 3.2vw, 2.5rem);
    --font-section-title: clamp(1.2rem, 1.8vw, 1.4rem);
    --font-card-title: 1.0625rem;
    --font-body: 1rem;
    --font-small: 0.875rem;
    --font-caption: 0.75rem;
    --font-button: 0.875rem;
    --font-label: 0.8125rem;

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

    --line-height-tight: 1.18;
    --line-height-body: 1.65;
    --line-height-relaxed: 1.75;

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

    /* Shadows — soft, layered (calm elevation) */
    --shadow-sm: 0 2px 8px rgba(49, 46, 129, 0.035), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 10px 28px rgba(49, 46, 129, 0.07), 0 2px 8px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 18px 48px rgba(49, 46, 129, 0.09), 0 6px 16px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 28px 72px rgba(109, 40, 217, 0.12), 0 10px 28px rgba(15, 23, 42, 0.05);
    --shadow-panel: 0 8px 28px rgba(49, 46, 129, 0.05);
    --shadow-modal: 0 28px 72px rgba(15, 23, 42, 0.14), 0 10px 28px rgba(109, 40, 217, 0.08);

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

    /* Status chips (Badge) — solid fill + readable text; see Design System §7 Badge */
    --badge-min-height: 1.625rem;
    --badge-pad-y: 0.2rem;
    --badge-pad-x: 0.65rem;
    --badge-line-height: 1.25;
    --badge-font-size: var(--font-caption);

    /* Layout — authenticated shell (see docs/architecture/LAYOUT_STANDARD.md)
       Gutter and content width are independent: change --shell-gutter without
       touching page max-widths, and vice versa.
       Sidebar width ≠ shell gutter ≠ content width — do not collapse these. */
    --sidebar-width: 16.5rem;
    --sidebar-surface: var(--sidebar-ink);
    --topbar-height: 3.625rem; /* was 3rem (48px); +10px ≈ 58px */
    /* Soft default ceiling only — pages may override (dashboards use available space) */
    --content-max: 80rem;
    /* Shared sidebar → content gutter (identical across all portals) */
    --shell-gutter: 1.75rem;
    --shell-gutter-sm: 1.25rem;

    /* Responsive breakpoints (Phase 2A)
       Documented widths aligned to Bootstrap 5 + existing media queries.
       Custom properties cannot be used inside @media in this stack — keep
       @media literals in sync with these tokens (do not redesign layouts). */
    --bp-xs: 360px;   /* very small phones (max-width: 359.98px patterns) */
    --bp-sm: 576px;   /* small / Bootstrap sm */
    --bp-md: 768px;   /* tablet / Bootstrap md */
    --bp-lg: 992px;   /* shell / desktop sidebar breakpoint */
    --bp-xl: 1200px;  /* wide desktop */
    --bp-xxl: 1400px; /* extra-wide dashboards */
    --shell-pad-block-start: 1.75rem;
    --shell-pad-block-end: 3.5rem;
    --shell-pad-block-start-sm: 1.25rem;
    --shell-pad-block-end-sm: 2.5rem;
    --page-header-gap: 0.85rem;
    --section-gap: var(--space-10);
    --card-stack-gap: var(--space-6);

    /*
     * Visual master — compact EHR page chrome (all authenticated portals).
     * Auto height; no marketing band; no decorative illustration.
     */
    --workspace-hero-height: auto;
    --workspace-hero-min-height: 0;
    --workspace-hero-padding-block: 0.85rem;
    --workspace-hero-padding-inline: 1.35rem;
    --workspace-hero-radius: var(--radius-panel, 0.5rem);
    --workspace-hero-title-size: clamp(1.25rem, 2vw, 1.55rem);
    --workspace-hero-bridge-opacity: 0;
    /* Page-specific practice tokens (rehab-programme / practice-responsive only) */
    --practice-content-max: 40rem;
    --practice-options-max: 28rem;
    --practice-option-col-max: 13rem;

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

    /* Dashboard tokens */
    --dashboard-bg: var(--background);
    --dashboard-card-radius: var(--radius-panel, 0.5rem);
    --dashboard-card-padding: 1.15rem;
    --dashboard-section-gap: var(--section-gap);

    /* ---- 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: 16px;
    --signin-radius-input: 8px;

    --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;
    }
}