/**
 * ============================================
 * Healing Space UK — Design System 3.0
 * ============================================
 * World-class design tokens. Futuristic, modern,
 * clinically appropriate. Linear.app meets Vercel
 * meets premium health SaaS.
 *
 * WCAG 2.1 AA compliant on all text/bg pairs.
 * ============================================
 */

/* ============================================
   FONTS — self-hosted, no third-party request
   ============================================
   Inter (300-900) and Plus Jakarta Sans (600-800) are served first-party from
   static/css/fonts.css, which every page linking this file also links. The CDN
   font import that used to sit here fetched them from Google's font hosts on
   every page load, which told a third party that a patient had opened Healing
   Space. It is removed, and no face is lost: the mono token (Fira Code) is used
   nowhere, and Plus Jakarta Sans 400/500 is never applied. Dropping the last
   third-party subresource is also what lets the app become cross-origin
   isolated, which WebAssembly threads require. */

/* ============================================
   LIGHT THEME (default)
   ============================================ */
:root {
    /* ------- Brand ------- */
    --brand-primary:    #6366f1;   /* Indigo 500 */
    --brand-secondary:  #8b5cf6;   /* Violet 500 */
    --brand-tertiary:   #06b6d4;   /* Cyan 500 — accent */
    --brand-gradient:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    --brand-gradient-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --brand-gradient-dark: linear-gradient(135deg, #1e2a6e 0%, #2d1554 100%);

    /* ------- Backgrounds ------- */
    --bg-primary:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* auth page body */
    --bg-page:      #f8f9ff;   /* Slight indigo tint — not harsh white */
    --bg-surface:   #ffffff;
    --bg-elevated:  #ffffff;
    --bg-card:      #ffffff;
    --bg-input:     #ffffff;
    --bg-sidebar:   #f4f5fd;
    --bg-hover:     #f0f1fd;
    --bg-active:    #ebe8fd;
    --bg-disabled:  #f8f9fa;
    --bg-overlay:   rgba(8, 8, 18, 0.55);
    --bg-gradient:  var(--brand-gradient);
    --bg-secondary: #f4f5fd;
    --bg-tertiary:  #e9ebf8;

    /* ------- Text ------- */
    --text-primary:   #0f0f23;   /* Near-black indigo tint — 18:1 on white (AAA) */
    --text-secondary: #4b5280;   /* Slate-indigo — 6.5:1 (AA) */
    --text-tertiary:  #4b5280;
    --text-muted:     #9496b8;   /* 4.5:1 (AA large) */
    --text-inverse:   #ffffff;
    --text-link:      #4f46e5;   /* Indigo 600 — 6.0:1 (AA) */
    --text-link-hover:#3730a3;
    --text-disabled:  #c7c9e0;

    /* ------- Borders ------- */
    --border-primary:  #e5e7f5;   /* Indigo-tinted */
    --border-secondary:#cbd0e8;
    --border-focus:    #5457d6;  /* I-5: accessible primary for interactive contexts */
    --border-error:    #f87171;
    --border-success:  #34d399;
    --border-color:    #e5e7f5;   /* alias for messaging.css compat */
    --border-accent:   rgba(99,102,241,0.25);

    /* ------- Interactive ------- */
    /* I-5 (decision B4/D2): #5457d6 (5.66:1 on/under white) is the accessible primary
       for TEXT and INTERACTIVE contexts; #6366f1 remains for decorative/gradient use
       only. This retires the accepted /login color-contrast exception. */
    --interactive-primary:        #5457d6;
    --interactive-primary-hover:  #4f46e5;
    --interactive-primary-active: #4338ca;
    --interactive-secondary:      #8b5cf6;
    --interactive-secondary-hover:#7c3aed;
    --interactive-tertiary:       #f0f1fd;
    --interactive-tertiary-hover: #e5e7f5;

    /* ------- Accent / accent-color aliases ------- */
    --accent-primary:   #5457d6;
    --accent-secondary: #8b5cf6;
    --accent-tertiary:  #06b6d4;
    --accent-color:     #5457d6;
    --accent-foreground: #ffffff;
    --accent-gradient:  linear-gradient(135deg, #6366f1, #8b5cf6);

    /* ------- Status / Semantic ------- */
    --success:              #10b981;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #3b82f6;
    --success-light:        rgba(16,185,129,0.12);
    --warning-light:        rgba(245,158,11,0.12);
    --danger-light:         rgba(239,68,68,0.12);
    --info-light:           rgba(59,130,246,0.12);

    /* Legacy aliases kept for backward compat */
    --status-success:        #10b981;
    --status-success-bg:     rgba(16,185,129,0.10);
    --status-success-border: rgba(16,185,129,0.30);
    --status-warning:        #d97706;
    --status-warning-bg:     rgba(245,158,11,0.10);
    --status-warning-border: rgba(245,158,11,0.30);
    --status-error:          #ef4444;
    --status-error-bg:       rgba(239,68,68,0.10);
    --status-error-border:   rgba(239,68,68,0.30);
    --status-info:           #3b82f6;
    --status-info-bg:        rgba(59,130,246,0.10);
    --status-info-border:    rgba(59,130,246,0.30);

    /* Legacy messaging.css vars */
    /* WCAG 2.1 SC 1.4.3: #6366f1 measured 4.46:1 on white, just under the 4.5 AA
       floor, both as text and as a button background behind white text.
       #5457d6 measures 5.66:1 in both directions. */
    --primary-color:    #5457d6;
    --secondary-color:  #10b981;
    --danger-color:     #ef4444;
    --warning-color:    #f59e0b;
    --success-color:    #10b981;
    --background-color: #f8f9ff;
    --surface-color:    #ffffff;

    /* index.html aliases — --text-color was used widely before rename */
    --text-color:  #0f0f1a;   /* = --text-primary in light */
    --bg-color:    #f5f5f8;   /* = --bg-secondary in light */
    --input-bg:    #ffffff;   /* = --bg-input in light */
    --hover-bg:    #e8e8f0;   /* = --bg-hover in light */
    --shadow-color: rgba(0,0,0,0.08);

    /* ------- Glassmorphism ------- */
    --glass-bg:          rgba(255,255,255,0.75);
    --glass-border:      rgba(255,255,255,0.50);
    --glass-blur:        blur(20px) saturate(1.8);
    --glass-bg-dark:     rgba(14,14,28,0.80);
    --glass-border-dark: rgba(99,102,241,0.20);

    /* ------- Shadows (indigo-tinted) ------- */
    --shadow-xs:  0 1px 3px rgba(99,102,241,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:  0 2px 8px rgba(99,102,241,0.08), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-md:  0 4px 16px rgba(99,102,241,0.10), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg:  0 8px 32px rgba(99,102,241,0.13), 0 4px 16px rgba(0,0,0,0.08);
    --shadow-xl:  0 16px 56px rgba(99,102,241,0.16), 0 8px 28px rgba(0,0,0,0.10);
    --shadow-2xl: 0 24px 80px rgba(99,102,241,0.20), 0 12px 40px rgba(0,0,0,0.12);
    --shadow-focus: 0 0 0 3px rgba(99,102,241,0.20);
    --shadow:       0 2px 8px rgba(99,102,241,0.10);   /* messaging.css alias */

    /* ------- Glow (dark mode only — defined in :root as no-ops) ------- */
    --glow-primary: none;
    --glow-success: none;
    --glow-danger:  none;
    --glow-cyan:    none;

    /* ------- Radius ------- */
    --radius-sm:   4px;
    --radius-base: 8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-2xl:  26px;
    --radius-full: 9999px;
    --radius:      10px;   /* messaging.css alias */

    /* ------- Spacing ------- */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */

    /* Legacy spacing aliases */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ------- Typography ------- */
    --font-family-base:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --font-family-mono:    'Fira Code', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */
    --font-size-5xl:  3rem;       /* 48px */
    --font-size-6xl:  3.75rem;    /* 60px */

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;

    --line-height-tight:   1.2;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.7;

    /* ------- Transitions ------- */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition:        250ms cubic-bezier(0.4, 0, 0.2, 1);   /* messaging.css alias */

    /* ------- Z-index ------- */
    --z-base:             0;
    --z-dropdown:         1000;
    --z-sticky:           1100;
    --z-fixed:            1200;
    --z-modal-backdrop:   9000;
    --z-modal:            9001;
    --z-popover:          9100;
    --z-tooltip:          9200;
    --z-notification:     9300;

    /* ------- Mental health specific ------- */
    --emotion-calm:         #dbeafe;
    --emotion-calm-dark:    #1e40af;
    --emotion-energized:    #fef3c7;
    --emotion-energized-dark:#92400e;
    --emotion-grounded:     #d1fae5;
    --emotion-grounded-dark:#065f46;
    --emotion-safe:         #ede9fe;
    --emotion-safe-dark:    #4c1d95;

    /* ------- Nav / footer (used by landing.html) ------- */
    --nav-bg:       rgba(255,255,255,0.92);
    --nav-border:   rgba(99,102,241,0.12);
    --footer-bg:    #0a0a18;
    --footer-text:  rgba(255,255,255,0.58);
    --footer-heading:#ffffff;

    /* ------- Stats (landing.html) ------- */
    --stats-bg:         #f2f3fb;
    --bg-stats:         #f2f3fb;
    --card-hover-shadow: 0 14px 44px rgba(99,102,241,0.22);
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* ------- Backgrounds ------- */
    --bg-primary:   linear-gradient(135deg, #1e2a6e 0%, #2d1554 100%);
    --bg-page:      #08081a;
    --bg-surface:   #0e0e24;
    --bg-elevated:  #14142e;
    --bg-card:      #14142e;
    --bg-input:     #1c1c3a;
    --bg-sidebar:   #0a0a18;
    --bg-hover:     #1c1c3a;
    --bg-active:    #252550;
    --bg-disabled:  #111128;
    --bg-overlay:   rgba(0, 0, 0, 0.70);
    --bg-gradient:  linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --bg-secondary: #0e0e24;
    --bg-tertiary:  #14142e;

    /* ------- Text ------- */
    --text-primary:   #e8e8ff;   /* Lavender-white — 12.5:1 on #08081a (AAA) */
    --text-secondary: #9090c0;   /* 4.7:1 (AA) */
    --text-tertiary:  #9090c0;
    --text-muted:     #5050a0;
    --text-inverse:   #0f0f23;
    --text-link:      #818cf8;   /* Indigo 400 — 6.2:1 (AA) */
    --text-link-hover:#a5b4fc;
    --text-disabled:  #2a2a50;

    /* ------- Borders ------- */
    --border-primary:  rgba(99,102,241,0.18);
    --border-secondary:rgba(99,102,241,0.28);
    --border-focus:    #818cf8;
    --border-error:    #f87171;
    --border-success:  #34d399;
    --border-color:    rgba(99,102,241,0.18);
    --border-accent:   rgba(99,102,241,0.35);

    /* ------- Interactive ------- */
    --interactive-primary:        #818cf8;
    --interactive-primary-hover:  #6366f1;
    --interactive-primary-active: #4f46e5;
    --interactive-secondary:      #a78bfa;
    --interactive-secondary-hover:#8b5cf6;
    --interactive-tertiary:       #1c1c3a;
    --interactive-tertiary-hover: #252550;

    /* ------- Accent ------- */
    --accent-primary:   #818cf8;
    --accent-secondary: #a78bfa;
    --accent-tertiary:  #22d3ee;
    --accent-color:     #818cf8;
    --accent-foreground: #12121f;  /* 6.3:1; white was 3.0:1 */
    --accent-gradient:  linear-gradient(135deg, #818cf8, #a78bfa);

    /* ------- Status ------- */
    --success:              #34d399;
    --warning:              #fbbf24;
    --danger:               #f87171;
    --info:                 #60a5fa;
    --success-light:        rgba(52,211,153,0.15);
    --warning-light:        rgba(251,191,36,0.15);
    --danger-light:         rgba(248,113,113,0.15);
    --info-light:           rgba(96,165,250,0.15);

    --status-success:        #34d399;
    --status-success-bg:     rgba(52,211,153,0.12);
    --status-success-border: rgba(52,211,153,0.30);
    --status-warning:        #fbbf24;
    --status-warning-bg:     rgba(251,191,36,0.12);
    --status-warning-border: rgba(251,191,36,0.30);
    --status-error:          #f87171;
    --status-error-bg:       rgba(248,113,113,0.12);
    --status-error-border:   rgba(248,113,113,0.30);
    --status-info:           #60a5fa;
    --status-info-bg:        rgba(96,165,250,0.12);
    --status-info-border:    rgba(96,165,250,0.30);

    /* Legacy messaging.css vars */
    --primary-color:    #818cf8;
    --secondary-color:  #34d399;
    --danger-color:     #f87171;
    --warning-color:    #fbbf24;
    --success-color:    #34d399;
    --background-color: #08081a;
    --surface-color:    #14142e;

    /* index.html aliases — dark mode equivalents */
    --text-color:  #e8e8ff;   /* = --text-primary in dark */
    --bg-color:    #0e0e24;   /* = --bg-secondary in dark */
    --input-bg:    #1c1c3a;   /* = --bg-input in dark */
    --hover-bg:    rgba(99,102,241,0.08);
    --shadow-color: rgba(0,0,0,0.40);

    /* ------- Glassmorphism ------- */
    --glass-bg:          rgba(14,14,28,0.82);
    --glass-border:      rgba(99,102,241,0.22);
    --glass-blur:        blur(20px) saturate(1.6);
    --glass-bg-dark:     rgba(8,8,24,0.88);
    --glass-border-dark: rgba(99,102,241,0.28);

    /* ------- Shadows with glow ------- */
    --shadow-xs:  0 1px 3px rgba(0,0,0,0.40);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.50);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(99,102,241,0.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px rgba(99,102,241,0.12);
    --shadow-xl:  0 0 40px rgba(99,102,241,0.22), 0 16px 56px rgba(0,0,0,0.65);
    --shadow-2xl: 0 0 60px rgba(99,102,241,0.28), 0 24px 80px rgba(0,0,0,0.75);
    --shadow-focus: 0 0 0 3px rgba(129,140,248,0.35);
    --shadow:       0 2px 8px rgba(0,0,0,0.45);

    /* ------- Glow effects ------- */
    --glow-primary: 0 0 24px rgba(99,102,241,0.40);
    --glow-success: 0 0 24px rgba(52,211,153,0.35);
    --glow-danger:  0 0 24px rgba(248,113,113,0.35);
    --glow-cyan:    0 0 24px rgba(6,182,212,0.35);

    /* ------- Nav / footer (used by landing.html) ------- */
    --nav-bg:       rgba(8,8,26,0.94);
    --nav-border:   rgba(99,102,241,0.22);
    --footer-bg:    #060612;
    --footer-text:  rgba(255,255,255,0.48);
    --footer-heading:#e8e8ff;

    /* ------- Stats ------- */
    --stats-bg:         #0e0e24;
    --bg-stats:         #0e0e24;
    --card-hover-shadow: 0 14px 44px rgba(99,102,241,0.30);

    /* ------- Mental health (dark) ------- */
    --emotion-calm:         #1e3a5f;
    --emotion-calm-dark:    #93c5fd;
    --emotion-energized:    #451a03;
    --emotion-energized-dark:#fde68a;
    --emotion-grounded:     #052e16;
    --emotion-grounded-dark:#6ee7b7;
    --emotion-safe:         #2e1065;
    --emotion-safe-dark:    #ddd6fe;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Blob float — for decorative background blobs */
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(22px, -18px) scale(1.06); }
    66%       { transform: translate(-14px, 20px) scale(0.96); }
}

/* Shimmer — loading skeleton */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

/* Slide up — cards, modals, tab content */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scale pop — notifications, badges */
@keyframes scale-pop {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.10); }
}

/* Pulse ring — active state indicator */
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* Gradient shift — accent borders, highlights */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Spin — loading spinners */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loading */
@keyframes loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Float particle — hero background */
@keyframes floatParticle {
    0%   { transform: translate(0, 0) rotate(0deg);        opacity: 0.25; }
    20%  { transform: translate(20px, -30px) rotate(72deg);  opacity: 0.55; }
    50%  { transform: translate(-15px, -80px) rotate(180deg);opacity: 0.30; }
    75%  { transform: translate(35px, -120px) rotate(270deg);opacity: 0.50; }
    100% { transform: translate(0, -170px) rotate(360deg);   opacity: 0; }
}

/* Slide in from right — notifications */
@keyframes slideIn     { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* Fade in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Toast animations */
@keyframes hs-toast-in  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes hs-toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
@keyframes hs-fade-in   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hs-spin      { to { transform: rotate(360deg); } }

/* Progress bar */
@keyframes hs-progress-indeterminate {
    0%   { transform: translateX(-100%) scaleX(0.3); }
    50%  { transform: translateX(0%) scaleX(0.6); }
    100% { transform: translateX(100%) scaleX(0.3); }
}

/* Skeleton shimmer */
@keyframes hs-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   HIGH CONTRAST
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --border-primary: #000000;
        --text-primary:   #000000;
        --text-link:      #0000cc;
    }
    [data-theme="dark"] {
        --border-primary: #ffffff;
        --text-primary:   #ffffff;
        --text-link:      #93c5fd;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    :root,
    [data-theme="dark"] {
        --bg-page:      #ffffff !important;
        --bg-surface:   #ffffff !important;
        --bg-card:      #ffffff !important;
        --text-primary: #000000 !important;
        --text-secondary:#333333 !important;
        --border-primary:#cccccc !important;
    }
}

/* ============================================
   GLOBAL BASE STYLES
   ============================================ */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.28);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.52); }

/* Selection */
::selection {
    background: rgba(99,102,241,0.22);
    color: inherit;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}