/**
 * ============================================
 * WovenPath — 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:    #188486;   /* Indigo 500 */
    --brand-secondary:  #18888A;   /* Violet 500 */
    --brand-tertiary:   #06b6d4;   /* Cyan 500 — accent */
    --brand-gradient:   linear-gradient(135deg, #188486 0%, #18888A 50%, #06b6d4 100%);
    --brand-gradient-2: linear-gradient(135deg, #188486 0%, #18888A 100%);
    --brand-gradient-dark: linear-gradient(135deg, #0F3737 0%, #0A2828 100%);

    /* ------- Backgrounds ------- */
    --bg-primary:   linear-gradient(135deg, #188486 0%, #18888A 100%); /* auth page body */
    --bg-page:      #EFFCFC;   /* Slight indigo tint — not harsh white */
    --bg-surface:   #ffffff;
    --bg-elevated:  #ffffff;
    --bg-card:      #ffffff;
    --bg-input:     #ffffff;
    --bg-sidebar:   #E3FAFA;
    --bg-hover:     #D8F8F8;
    --bg-active:    #C3F4F4;
    --bg-disabled:  #f8f9fa;
    --bg-overlay:   rgba(5,10,10, 0.55);
    --bg-gradient:  var(--brand-gradient);
    --bg-secondary: #E3FAFA;
    --bg-tertiary:  #D6F1F2;

    /* ------- Text ------- */
    --text-primary:   #081313;   /* Near-black indigo tint — 18:1 on white (AAA) */
    --text-secondary: #42595A;   /* Slate-indigo — 6.5:1 (AA) */
    --text-tertiary:  #42595A;
    --text-muted:     #839E9E;   /* 4.5:1 (AA large) */
    --text-inverse:   #ffffff;
    --text-link:      #136A6C;   /* Indigo 600 — 6.0:1 (AA) */
    --text-link-hover:#164A4A;
    --text-disabled:  #BBCECF;

    /* ------- Borders ------- */
    --border-primary:  #D2EDEE;   /* Indigo-tinted */
    --border-secondary:#ACD9DA;
    --border-focus:    #1C7374;  /* I-5: accessible primary for interactive contexts */
    --border-error:    #f87171;
    --border-success:  #34d399;
    --border-color:    #D2EDEE;   /* alias for messaging.css compat */
    --border-accent:   rgba(24,132,134,0.25);

    /* ------- Interactive ------- */
    /* I-5 (decision B4/D2): #1C7374 (5.66:1 on/under white) is the accessible primary
       for TEXT and INTERACTIVE contexts; #188486 remains for decorative/gradient use
       only. This retires the accepted /login color-contrast exception. */
    --interactive-primary:        #1C7374;
    --interactive-primary-hover:  #136A6C;
    --interactive-primary-active: #185B5C;
    --interactive-secondary:      #18888A;
    --interactive-secondary-hover:#147273;
    --interactive-tertiary:       #D8F8F8;
    --interactive-tertiary-hover: #D2EDEE;

    /* ------- Accent / accent-color aliases ------- */
    --accent-primary:   #1C7374;
    --accent-secondary: #18888A;
    --accent-tertiary:  #06b6d4;
    --accent-color:     #1C7374;
    --accent-foreground: #ffffff;
    --accent-gradient:  linear-gradient(135deg, #188486, #18888A);

    /* ------- Status / Semantic ------- */
    --success:              #10b981;
    --warning:              #f59e0b;
    --danger:               #ef4444;
    --info:                 #1A9396;
    --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(26,147,150,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:           #1A9396;
    --status-info-bg:        rgba(26,147,150,0.10);
    --status-info-border:    rgba(26,147,150,0.30);

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

    /* index.html aliases — --text-color was used widely before rename */
    --text-color:  #0C1111;   /* = --text-primary in light */
    --bg-color:    #F3F6F6;   /* = --bg-secondary in light */
    --input-bg:    #ffffff;   /* = --bg-input in light */
    --hover-bg:    #E3EAEA;   /* = --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(8,17,17,0.80);
    --glass-border-dark: rgba(24,132,134,0.20);

    /* ------- Shadows (indigo-tinted) ------- */
    --shadow-xs:  0 1px 3px rgba(24,132,134,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:  0 2px 8px rgba(24,132,134,0.08), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-md:  0 4px 16px rgba(24,132,134,0.10), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg:  0 8px 32px rgba(24,132,134,0.13), 0 4px 16px rgba(0,0,0,0.08);
    --shadow-xl:  0 16px 56px rgba(24,132,134,0.16), 0 8px 28px rgba(0,0,0,0.10);
    --shadow-2xl: 0 24px 80px rgba(24,132,134,0.20), 0 12px 40px rgba(0,0,0,0.12);
    --shadow-focus: 0 0 0 3px rgba(24,132,134,0.20);
    --shadow:       0 2px 8px rgba(24,132,134,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:    #0F5355;
    --emotion-energized:    #fef3c7;
    --emotion-energized-dark:#92400e;
    --emotion-grounded:     #d1fae5;
    --emotion-grounded-dark:#065f46;
    --emotion-safe:         #C7F4F5;
    --emotion-safe-dark:    #0D4344;

    /* ------- Nav / footer (used by landing.html) ------- */
    --nav-bg:       rgba(255,255,255,0.92);
    --nav-border:   rgba(24,132,134,0.12);
    --footer-bg:    #050D0D;
    --footer-text:  rgba(255,255,255,0.58);
    --footer-heading:#ffffff;

    /* ------- Stats (landing.html) ------- */
    --stats-bg:         #E5F7F7;
    --bg-stats:         #E5F7F7;
    --card-hover-shadow: 0 14px 44px rgba(24,132,134,0.22);
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* ------- Backgrounds ------- */
    --bg-primary:   linear-gradient(135deg, #0F3737 0%, #0A2828 100%);
    --bg-page:      #040B0C;
    --bg-surface:   #071213;
    --bg-elevated:  #0B1A1A;
    --bg-card:      #0B1A1A;
    --bg-input:     #112223;
    --bg-sidebar:   #050D0D;
    --bg-hover:     #112223;
    --bg-active:    #152E2E;
    --bg-disabled:  #091616;
    --bg-overlay:   rgba(0, 0, 0, 0.70);
    --bg-gradient:  linear-gradient(135deg, #136A6C 0%, #147273 100%);
    --bg-secondary: #071213;
    --bg-tertiary:  #0B1A1A;

    /* ------- Text ------- */
    --text-primary:   #C1F3F4;   /* Lavender-white — 12.5:1 on #040B0C (AAA) */
    --text-secondary: #759C9C;   /* 4.7:1 (AA) */
    --text-tertiary:  #759C9C;
    --text-muted:     #316161;
    --text-inverse:   #081313;
    --text-link:      #1EA6A8;   /* Indigo 400 — 6.2:1 (AA) */
    --text-link-hover:#24CCCE;
    --text-disabled:  #1A3132;

    /* ------- Borders ------- */
    --border-primary:  rgba(24,132,134,0.18);
    --border-secondary:rgba(24,132,134,0.28);
    --border-focus:    #1EA6A8;
    --border-error:    #f87171;
    --border-success:  #34d399;
    --border-color:    rgba(24,132,134,0.18);
    --border-accent:   rgba(24,132,134,0.35);

    /* ------- Interactive ------- */
    --interactive-primary:        #1EA6A8;
    --interactive-primary-hover:  #188486;
    --interactive-primary-active: #136A6C;
    --interactive-secondary:      #1FAEB0;
    --interactive-secondary-hover:#18888A;
    --interactive-tertiary:       #112223;
    --interactive-tertiary-hover: #152E2E;

    /* ------- Accent ------- */
    --accent-primary:   #1EA6A8;
    --accent-secondary: #1FAEB0;
    --accent-tertiary:  #22d3ee;
    --accent-color:     #1EA6A8;
    --accent-foreground: #0F1515;  /* 6.3:1; white was 3.0:1 */
    --accent-gradient:  linear-gradient(135deg, #1EA6A8, #1FAEB0);

    /* ------- 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:    #1EA6A8;
    --secondary-color:  #34d399;
    --danger-color:     #f87171;
    --warning-color:    #fbbf24;
    --success-color:    #34d399;
    --background-color: #040B0C;
    --surface-color:    #0B1A1A;

    /* index.html aliases — dark mode equivalents */
    --text-color:  #C1F3F4;   /* = --text-primary in dark */
    --bg-color:    #071213;   /* = --bg-secondary in dark */
    --input-bg:    #112223;   /* = --bg-input in dark */
    --hover-bg:    rgba(24,132,134,0.08);
    --shadow-color: rgba(0,0,0,0.40);

    /* ------- Glassmorphism ------- */
    --glass-bg:          rgba(8,17,17,0.82);
    --glass-border:      rgba(24,132,134,0.22);
    --glass-blur:        blur(20px) saturate(1.6);
    --glass-bg-dark:     rgba(4,11,12,0.88);
    --glass-border-dark: rgba(24,132,134,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(24,132,134,0.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px rgba(24,132,134,0.12);
    --shadow-xl:  0 0 40px rgba(24,132,134,0.22), 0 16px 56px rgba(0,0,0,0.65);
    --shadow-2xl: 0 0 60px rgba(24,132,134,0.28), 0 24px 80px rgba(0,0,0,0.75);
    --shadow-focus: 0 0 0 3px rgba(30,166,168,0.35);
    --shadow:       0 2px 8px rgba(0,0,0,0.45);

    /* ------- Glow effects ------- */
    --glow-primary: 0 0 24px rgba(24,132,134,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(4,11,12,0.94);
    --nav-border:   rgba(24,132,134,0.22);
    --footer-bg:    #030809;
    --footer-text:  rgba(255,255,255,0.48);
    --footer-heading:#C1F3F4;

    /* ------- Stats ------- */
    --stats-bg:         #071213;
    --bg-stats:         #071213;
    --card-hover-shadow: 0 14px 44px rgba(24,132,134,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:         #082A2B;
    --emotion-safe-dark:    #8EEAEB;
}

/* ============================================
   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(24,132,134,0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(24,132,134,0); }
    100% { box-shadow: 0 0 0 0 rgba(24,132,134,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:      #0C4242;
    }
    [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(24,132,134,0.28);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover { background: rgba(24,132,134,0.52); }

/* Selection */
::selection {
    background: rgba(24,132,134,0.22);
    color: inherit;
}

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