/**
 * HeuriSight Apple-Inspired Design Tokens
 * Based on mockups/apple-redesign/DESIGN_SYSTEM.md
 * 
 * Usage: Include this file BEFORE other CSS files for proper cascade.
 * These tokens should be used throughout the application for consistency.
 */

/* ===== BASE TOKENS (Light Theme Default) ===== */
:root {
    /* ----- Accent Colors ----- */
    --accent: #0071E3;               /* Apple Blue */
    --accent-hover: #0077ED;
    --accent-subtle: rgba(0, 113, 227, 0.08);
    
    /* ----- Semantic Colors ----- */
    --success: #34C759;              /* Apple Green */
    --success-subtle: rgba(52, 199, 89, 0.12);
    --warning: #FF9500;              /* Apple Orange */
    --warning-subtle: rgba(255, 149, 0, 0.12);
    --destructive: #FF3B30;          /* Apple Red */
    --destructive-subtle: rgba(255, 59, 48, 0.12);
    --purple: #AF52DE;               /* AI/Special accent */
    --purple-subtle: rgba(175, 82, 222, 0.12);
    --info: #5AC8FA;                 /* Apple Light Blue */
    --info-subtle: rgba(90, 200, 250, 0.12);
    
    /* ----- Neutral Palette (Warm Grays) ----- */
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F7;             /* Apple's signature background */
    --gray-200: #E8E8ED;
    --gray-300: #D2D2D7;
    --gray-400: #86868B;             /* Secondary text */
    --gray-500: #6E6E73;
    --gray-600: #515154;
    --gray-700: #3A3A3C;
    --gray-800: #2C2C2E;
    --gray-900: #1D1D1F;             /* Primary text */

    /* ----- Surface Tokens ----- */
    --surface-1: #FFFFFF;
    --surface-2: var(--gray-100);
    --surface-3: var(--gray-200);
    --surface-4: var(--gray-300);
    --surface-overlay: rgba(255, 255, 255, 0.8);
    --surface-overlay-strong: rgba(255, 255, 255, 0.95);
    
    /* ----- Theme-Aware Colors (Light Theme Default) ----- */
    /* These are the semantic colors used throughout the app */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F7;
    --bg-tertiary: #E8E8ED;
    --bg-elevated: #FFFFFF;
    
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #86868B;
    --text-muted: #A1A1A6;
    
    --border-light: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.15);
    
    /* ----- Typography ----- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    --font-mono: 'SF Mono', 'Menlo', 'Monaco', monospace;
    
    /* Type Scale */
    --text-xs: 11px;     /* Labels, badges */
    --text-sm: 13px;     /* Secondary text, nav items */
    --text-base: 15px;   /* Body text */
    --text-lg: 17px;     /* Section headers */
    --text-xl: 20px;     /* Page titles (secondary) */
    --text-2xl: 24px;    /* Page titles */
    --text-3xl: 28px;    /* Hero text */
    --text-4xl: 34px;    /* Large numbers/stats */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    
    /* ----- Spacing (4px Grid) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    
    /* ----- Border Radius ----- */
    --radius-sm: 8px;     /* Buttons, inputs, small elements */
    --radius-md: 12px;    /* Cards, panels */
    --radius-lg: 16px;    /* Large cards, sections */
    --radius-xl: 20px;    /* Modals, featured content */
    --radius-full: 9999px; /* Pills, avatars, circular elements */
    
    /* ----- Shadows ----- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
    
    /* ----- Transitions ----- */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ----- Z-Index Scale ----- */
    /* 
     * IMPORTANT: These values must be high enough to layer above all app content.
     * Previous values (100-600) caused modals to appear behind other elements.
     * Now using 1000+ range to ensure proper stacking across the app.
     */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 2000;
    --z-overlay: 9000;
    --z-modal: 9500;
    --z-toast: 9800;
    --z-tooltip: 9900;
    --z-critical: 10000;  /* For modals that must always be on top */
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1C1C1E;
    --bg-secondary: #2C2C2E;
    --bg-tertiary: #3A3A3C;
    --bg-elevated: #48484A;
    
    /* Text Colors */
    --text-primary: #F5F5F7;
    --text-secondary: #A1A1A6;
    --text-tertiary: #6E6E73;
    --text-muted: #515154;

    /* Surface Tokens */
    --surface-1: var(--gray-900);
    --surface-2: var(--gray-800);
    --surface-3: var(--gray-700);
    --surface-4: var(--gray-600);
    --surface-overlay: rgba(17, 24, 39, 0.6);
    --surface-overlay-strong: rgba(17, 24, 39, 0.9);
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);
    
    /* Semantic Subtle Colors (adjusted for dark) */
    --success-subtle: rgba(52, 199, 89, 0.15);
    --warning-subtle: rgba(255, 149, 0, 0.15);
    --destructive-subtle: rgba(255, 59, 48, 0.15);
    --accent-subtle: rgba(0, 113, 227, 0.15);
    --purple-subtle: rgba(175, 82, 222, 0.15);
    
    /* Shadows (adjusted for dark) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F7;
    --bg-tertiary: #E8E8ED;
    --bg-elevated: #FFFFFF;
    
    /* Text Colors */
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #86868B;
    --text-muted: #A1A1A6;
    
    /* Border Colors */
    --border-light: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.15);
    
    /* Semantic Subtle Colors (adjusted for light) */
    --success-subtle: rgba(52, 199, 89, 0.1);
    --warning-subtle: rgba(255, 149, 0, 0.1);
    --destructive-subtle: rgba(255, 59, 48, 0.1);
    --accent-subtle: rgba(0, 113, 227, 0.08);
    --purple-subtle: rgba(175, 82, 222, 0.1);
}

/* ===== COMPONENT-SPECIFIC TOKENS ===== */

/* Status Badge Colors */
:root {
    --badge-success-bg: var(--success-subtle);
    --badge-success-text: var(--success);
    --badge-warning-bg: var(--warning-subtle);
    --badge-warning-text: var(--warning);
    --badge-error-bg: var(--destructive-subtle);
    --badge-error-text: var(--destructive);
    --badge-info-bg: var(--accent-subtle);
    --badge-info-text: var(--accent);
    --badge-neutral-bg: var(--bg-tertiary);
    --badge-neutral-text: var(--text-secondary);
}

/* Focus Ring */
:root {
    --focus-ring-color: var(--accent);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-style: solid;
}

/* ===== BASE ELEMENT STYLES ===== */
html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
    
    html, body {
        transition: none;
    }
}