/* =========================================
   DESIGN TOKENS - Bipolar IN Order v5
   =========================================
   Single source of truth for colors, spacing,
   typography, and component styles.
   
   Usage: var(--color-primary)
   ========================================= */

:root {
    /* ───────────────────────────────────────
       MOOD COLORS
       These are the core brand colors tied to
       the bipolar experience visualization
       ─────────────────────────────────────── */
    
    /* Depression - Blue spectrum */
    --color-depression: #36A2EB;
    --color-depression-light: #7FC4F5;
    --color-depression-lighter: #B2D9FA;
    --color-depression-bg: #E3F2FD;
    
    /* Mania - Red/Pink spectrum */
    --color-mania: #FF6384;
    --color-mania-light: #FF8FA3;
    --color-mania-lighter: #FFBBC9;
    --color-mania-bg: #FFEBEE;
    
    /* ───────────────────────────────────────
       TOOL STRENGTH LEVELS
       Used in timeline slider, tool cards,
       check-in reports, and badges
       ─────────────────────────────────────── */
    
    /* Simple - Green */
    --color-simple: #4CAF50;
    --color-simple-light: #81C784;
    --color-simple-bg: #E8F5E9;
    --color-simple-text: #2E7D32;
    
    /* Stronger - Orange */
    --color-stronger: #FF9800;
    --color-stronger-light: #FFB74D;
    --color-stronger-bg: #FFF3E0;
    --color-stronger-text: #E65100;
    
    /* Extreme - Red-Orange */
    --color-extreme: #F44336;
    --color-extreme-light: #E57373;
    --color-extreme-bg: #FFEBEE;
    --color-extreme-text: #C62828;
    
    /* Crisis - Deep Red */
    --color-crisis: #D32F2F;
    --color-crisis-light: #EF5350;
    --color-crisis-bg: #FFCDD2;
    --color-crisis-text: #B71C1C;
    
    /* ───────────────────────────────────────
       SEMANTIC COLORS
       UI feedback and status indicators
       ─────────────────────────────────────── */
    
    --color-success: #4CAF50;
    --color-success-bg: #E8F5E9;
    --color-success-text: #2E7D32;
    
    --color-warning: #FF9800;
    --color-warning-bg: #FFF3E0;
    --color-warning-text: #E65100;
    
    --color-error: #F44336;
    --color-error-bg: #FFEBEE;
    --color-error-text: #C62828;
    
    --color-info: #36A2EB;
    --color-info-bg: #E3F2FD;
    --color-info-text: #1565C0;
    
    /* ───────────────────────────────────────
       COMFORT ZONE STATUS
       Used in check-ins and reports
       ─────────────────────────────────────── */
    
    --color-comfort-inside: #B2C4FF;
    --color-comfort-slightly: #FFF59D;
    --color-comfort-toofar: #FFCDD2;
    
    /* ───────────────────────────────────────
       ENVIRONMENT PERCEPTION
       ─────────────────────────────────────── */
    
    --color-env-very-positive: #C8E6C9;
    --color-env-somewhat-positive: #DCEDC8;
    --color-env-neutral: #E0E0E0;
    --color-env-somewhat-negative: #FFCDD2;
    --color-env-very-negative: #EF9A9A;
    
    /* ───────────────────────────────────────
       BEHAVIOR STATUS
       ─────────────────────────────────────── */
    
    --color-behavior-inorder: #BBDEFB;
    --color-behavior-disordered: #FFE0B2;
    --color-behavior-outofcontrol: #FFCDD2;
    
    /* ───────────────────────────────────────
       NEUTRAL / UI COLORS
       Warm-tinted grays for a supportive feel
       ─────────────────────────────────────── */
    
    /* Backgrounds - warm off-whites */
    --color-bg-page: #FAF9F7;
    --color-bg-card: #FFFFFF;
    --color-bg-subtle: #F5F4F2;
    --color-bg-muted: #EEEDEB;
    --color-surface: #F8F9FA;        /* Alias for panels/sidebars */
    
    /* Borders */
    --color-border: #E0DFDD;
    --color-border-light: #EEEDEB;
    --color-border-dark: #C5C4C2;
    
    /* Text - warm grays */
    --color-text-primary: #2D2B29;
    --color-text-secondary: #5C5A57;
    --color-text-muted: #8A8885;
    --color-text-placeholder: #B0AFAD;
    --color-text: #2D2B29;           /* Alias for primary text */
    
    /* ───────────────────────────────────────
       INTERACTIVE COLORS
       Buttons, links, focus states
       ─────────────────────────────────────── */
    
    /* Primary action - Depression Blue */
    --color-primary: #36A2EB;
    --color-primary-hover: #2B8AD4;
    --color-primary-active: #2277BD;
    --color-primary-text: #FFFFFF;
    
    /* Secondary action */
    --color-secondary: #5C5A57;
    --color-secondary-hover: #4A4846;
    --color-secondary-text: #FFFFFF;
    
    /* Links */
    --color-link: #36A2EB;
    --color-link-hover: #2277BD;
    --color-link-visited: #7B68EE;
    
    /* Focus ring */
    --color-focus: rgba(54, 162, 235, 0.4);
    
    /* ───────────────────────────────────────
       TYPOGRAPHY
       ─────────────────────────────────────── */
    
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", 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-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ───────────────────────────────────────
       SPACING
       Based on 4px grid
       ─────────────────────────────────────── */
    
    --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 */
    
    /* ───────────────────────────────────────
       BORDERS & RADIUS
       ─────────────────────────────────────── */
    
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    
    --border-width: 1px;
    --border-width-thick: 2px;
    
    /* ───────────────────────────────────────
       SHADOWS
       ─────────────────────────────────────── */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* ───────────────────────────────────────
       TRANSITIONS
       ─────────────────────────────────────── */
    
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* ───────────────────────────────────────
       LAYOUT
       ─────────────────────────────────────── */
    
    --content-width: 960px;
    --content-narrow: 700px;
    --content-wide: 1200px;
    
    /* ───────────────────────────────────────
       Z-INDEX SCALE
       ─────────────────────────────────────── */
    
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* ───────────────────────────────────────
   TIMELINE SLIDER GRADIENT
   Uses lighter variants to match value boxes
   ─────────────────────────────────────── */

:root {
    --slider-gradient: linear-gradient(
        to right,
        var(--color-simple-light) 0%,
        var(--color-stronger-light) 40%,
        var(--color-extreme-light) 70%,
        var(--color-crisis-light) 100%
    );
}

/* ───────────────────────────────────────
   DARK MODE (future-proofing)
   ─────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    :root {
        /* Can be enabled later when ready */
        /* --color-bg-page: #1a1918; */
    }
}

/* ═══════════════════════════════════════
   COLOR PALETTES
   User-selectable via Settings page
   Applied via data-palette attribute on <html>
   ═══════════════════════════════════════ */

/* ───────────────────────────────────────
   COOL PALETTE
   Cooler, blue-tinted neutrals
   More clinical/professional feel
   ─────────────────────────────────────── */

[data-palette="cool"] {
    /* Backgrounds - cool blue-grays */
    --color-bg-page: #F5F7FA;
    --color-bg-card: #FFFFFF;
    --color-bg-subtle: #EEF1F5;
    --color-bg-muted: #E3E7ED;
    
    /* Borders - cool grays */
    --color-border: #D1D5DB;
    --color-border-light: #E5E7EB;
    --color-border-dark: #9CA3AF;
    
    /* Text - cool grays */
    --color-text-primary: #1F2937;
    --color-text-secondary: #4B5563;
    --color-text-muted: #6B7280;
    --color-text-placeholder: #9CA3AF;
    
    /* Primary - slightly deeper blue */
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-primary-active: #1E40AF;
    
    /* Links */
    --color-link: #2563EB;
    --color-link-hover: #1D4ED8;
    
    /* Focus */
    --color-focus: rgba(37, 99, 235, 0.4);
    
    /* Tool colors - same hues, cooler undertones */
    --color-simple-bg: #DCFCE7;
    --color-stronger-bg: #FEF3C7;
    --color-extreme-bg: #FEE2E2;
    --color-crisis-bg: #FECACA;
}

/* ───────────────────────────────────────
   BOLD PALETTE  
   High contrast, saturated colors
   More energetic/vibrant feel
   ─────────────────────────────────────── */

[data-palette="bold"] {
    /* Backgrounds - crisp white with contrast */
    --color-bg-page: #FFFFFF;
    --color-bg-card: #FFFFFF;
    --color-bg-subtle: #F3F4F6;
    --color-bg-muted: #E5E7EB;
    
    /* Borders - stronger contrast */
    --color-border: #D1D5DB;
    --color-border-light: #E5E7EB;
    --color-border-dark: #6B7280;
    
    /* Text - higher contrast */
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-muted: #6B7280;
    --color-text-placeholder: #9CA3AF;
    
    /* Primary - vivid blue */
    --color-primary: #0EA5E9;
    --color-primary-hover: #0284C7;
    --color-primary-active: #0369A1;
    
    /* Links */
    --color-link: #0EA5E9;
    --color-link-hover: #0284C7;
    
    /* Focus */
    --color-focus: rgba(14, 165, 233, 0.4);
    
    /* Tool colors - more saturated */
    --color-simple: #22C55E;
    --color-simple-light: #4ADE80;
    --color-simple-bg: #BBF7D0;
    --color-simple-text: #166534;
    
    --color-stronger: #F59E0B;
    --color-stronger-light: #FBBF24;
    --color-stronger-bg: #FDE68A;
    --color-stronger-text: #B45309;
    
    --color-extreme: #EF4444;
    --color-extreme-light: #F87171;
    --color-extreme-bg: #FECACA;
    --color-extreme-text: #B91C1C;
    
    --color-crisis: #DC2626;
    --color-crisis-light: #F87171;
    --color-crisis-bg: #FCA5A5;
    --color-crisis-text: #991B1B;
    
    /* Mood colors - more vivid */
    --color-depression: #3B82F6;
    --color-mania: #F43F5E;
}