/**
 * Cadeo Design System - Theme Variables
 *
 * This file contains all CSS custom properties (design tokens) for the app.
 * It defines the visual language including colors, typography, spacing, shadows, etc.
 *
 * Usage:
 * - Import at the top of your main stylesheet: @import url('styles/theme.css');
 * - Reference variables like: color: var(--text-primary);
 *
 * Theme Support:
 * - Light mode (default): :root
 * - Dark mode (explicit): [data-theme="dark"]
 * - Dark mode (system): @media (prefers-color-scheme: dark)
 */

:root {
    /* ============================================================
     * TYPOGRAPHY
     * ============================================================ */

    /* Font Family */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;

    /* Semantic Font Scale
     * Use these for consistent sizing across the app:
     * 2xs=10px, xs=11px, sm=13px, base=15px, md=17px, lg=20px, xl=24px, 2xl=32px, 3xl=40px */
    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;

    /* Numeric Font Scale (fills gaps in semantic scale) */
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-22: 22px;
    --font-size-26: 26px;

    /* Line Height */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* ============================================================
     * SPACING
     * ============================================================ */

    --space-0: 0px;
    --space-half: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ============================================================
     * COLORS - BACKGROUNDS
     * ============================================================ */

    --bg-primary: #FFFFFF;
    --bg-main: #FFFFFF;
    --bg-sidebar: #F8F8F8;
    --bg-secondary: #F8F8F8;
    --bg-tertiary: #F5F5F5;
    --bg-light: #F8F9FB;
    --bg-elevated: #FFFFFF;
    --bg-card: #FFFFFF;

    /* ============================================================
     * COLORS - TEXT (WCAG AA compliant)
     * ============================================================ */

    --text-primary: #1A1A1A;
    --text-secondary: #595959;  /* 7.0:1 contrast - AA compliant */
    --text-tertiary: #737373;   /* 4.7:1 contrast - AA compliant */
    --text-quaternary: #A6A6A6; /* For decorative/non-essential text only */

    /* ============================================================
     * COLORS - ACCENT BLUE
     * ============================================================ */

    --accent-blue: #4A90D9;
    --accent-blue-light: rgba(74, 144, 217, 0.08);
    --accent-blue-hover: rgba(74, 144, 217, 0.12);
    --accent-blue-focus: rgba(74, 144, 217, 0.15);
    --accent-blue-bg: rgba(74, 144, 217, 0.04);
    --accent-blue-border: rgba(74, 144, 217, 0.3);
    --accent-blue-dark: #3a7bc8;
    --accent-blue-gradient-end: #6BA8E5;

    /* Accent Blue Opacity Scale */
    --accent-blue-opacity-3: rgba(74, 144, 217, 0.03);
    --accent-blue-opacity-5: rgba(74, 144, 217, 0.05);
    --accent-blue-opacity-8: rgba(74, 144, 217, 0.08);
    --accent-blue-opacity-10: rgba(74, 144, 217, 0.10);
    --accent-blue-opacity-12: rgba(74, 144, 217, 0.12);
    --accent-blue-opacity-15: rgba(74, 144, 217, 0.15);
    --accent-blue-opacity-20: rgba(74, 144, 217, 0.20);

    /* ============================================================
     * COLORS - PRIMARY (alias for accent-blue)
     * ============================================================ */

    --primary: #357ABD;
    --primary-hover: #2d6aa3;

    /* ============================================================
     * COLORS - SEMANTIC
     * ============================================================ */

    --color-danger: #DC3545;
    --color-danger-light: rgba(220, 53, 69, 0.08);
    --color-success: var(--badge-repeat);
    --color-success-light: rgba(69, 160, 73, 0.08);
    --color-warning: #F5A623;
    --color-warning-light: rgba(245, 166, 35, 0.08);
    --color-error: #EF4444;
    --color-error-light: rgba(239, 68, 68, 0.08);

    /* ============================================================
     * COLORS - ADDITIONAL ACCENTS
     * ============================================================ */

    --accent-red: #DC3545;
    --accent-red-light: rgba(220, 53, 69, 0.08);
    --accent-red-hover: rgba(220, 53, 69, 0.12);
    --accent-green: #45A049;
    --accent-green-light: rgba(69, 160, 73, 0.08);
    --accent-green-hover: rgba(69, 160, 73, 0.12);
    --accent-orange: #F57C00;
    --accent-orange-light: rgba(245, 124, 0, 0.08);
    --accent-orange-hover: rgba(245, 124, 0, 0.12);

    /* ============================================================
     * COLORS - BADGES
     * ============================================================ */

    --badge-schedule: #357ABD;
    --badge-deadline: #C84038;
    --badge-duration: #0097A7;
    --badge-tags: #8B5CAF;
    --badge-repeat: #45A049;
    --badge-notes: #607D8B;
    --badge-project: #F57C00;
    --badge-area: #00897B;
    --badge-priority-p1: #D32F2F;
    --badge-priority-p2: #F57C00;
    --badge-priority-p3: #757575;

    /* ============================================================
     * COLORS - BORDERS & SURFACES
     * ============================================================ */

    --border-light: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-primary: var(--border-medium);
    --border-subtle: 0.5px solid var(--border-light);
    --surface-hover: rgba(0, 0, 0, 0.04);
    --surface-active: rgba(0, 0, 0, 0.08);
    --surface-elevated: #FFFFFF;

    /* Hover & Focus States */
    --hover-light: rgba(0, 0, 0, 0.04);
    --hover-accent: var(--accent-blue-opacity-8);
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-blue);
    --focus-ring-inset: inset 0 0 0 2px var(--accent-blue);

    /* ============================================================
     * SHADOWS - Premium Elevation System
     * ============================================================ */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-focus: 0 0 0 3px var(--accent-blue-focus);

    /* ============================================================
     * BORDER RADIUS
     * ============================================================ */

    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --radius-circle: 50%;

    /* ============================================================
     * SIZING - ICONS
     * ============================================================ */

    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 48px;

    /* ============================================================
     * SIZING - BUTTONS
     * ============================================================ */

    --btn-sm: 28px;
    --btn-md: 32px;
    --btn-lg: 40px;
    --btn-padding-sm: var(--space-1) var(--space-3);
    --btn-padding-md: var(--space-2) var(--space-4);
    --btn-padding-lg: var(--space-3) var(--space-6);

    /* ============================================================
     * TRANSITIONS & ANIMATIONS
     * ============================================================ */

    --transition-xs: 100ms ease;
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================================
     * LAYOUT - BREAKPOINTS
     * ============================================================ */

    --breakpoint-compact: 768px;
    --breakpoint-regular: 1024px;
    --breakpoint-wide: 1440px;

    /* ============================================================
     * Z-INDEX SCALE
     * ============================================================ */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 150;
    --z-popover: 200;
    --z-modal-dropdown: 300;
    --z-modal: 400;
    --z-overlay: 500;
    --z-command-bar: 700;
}

/* ============================================================
 * DARK MODE - Explicit Theme
 * ============================================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #1A1A1A;
    --bg-main: #121212;
    --bg-sidebar: #1E1E1E;
    --bg-secondary: #1E1E1E;
    --bg-tertiary: #252525;
    --bg-light: #1F1F1F;
    --bg-elevated: #2A2A2A;
    --bg-card: #242424;

    /* Text */
    --text-primary: #F5F5F5;
    --text-secondary: #B3B3B3;
    --text-tertiary: #8A8A8A;
    --text-quaternary: #666666;

    /* Accent (slightly brighter for dark mode) */
    --accent-blue: #5B9FE3;
    --accent-blue-light: rgba(91, 159, 227, 0.12);
    --accent-blue-hover: rgba(91, 159, 227, 0.18);
    --accent-blue-focus: rgba(91, 159, 227, 0.2);
    --accent-blue-bg: rgba(91, 159, 227, 0.08);
    --accent-blue-border: rgba(91, 159, 227, 0.4);
    --accent-blue-dark: #4A90D9;
    --accent-blue-gradient-end: #7BB3EA;

    /* Borders & Surfaces */
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --surface-hover: rgba(255, 255, 255, 0.04);
    --surface-active: rgba(255, 255, 255, 0.08);
    --surface-elevated: #2A2A2A;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);

    /* Accent Opacity Scale */
    --accent-blue-opacity-3: rgba(91, 159, 227, 0.05);
    --accent-blue-opacity-5: rgba(91, 159, 227, 0.08);
    --accent-blue-opacity-8: rgba(91, 159, 227, 0.12);
    --accent-blue-opacity-10: rgba(91, 159, 227, 0.15);
    --accent-blue-opacity-12: rgba(91, 159, 227, 0.18);
    --accent-blue-opacity-15: rgba(91, 159, 227, 0.2);
    --accent-blue-opacity-20: rgba(91, 159, 227, 0.25);

    /* Hover & Focus States */
    --hover-light: rgba(255, 255, 255, 0.04);
    --hover-accent: var(--accent-blue-opacity-8);
    --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-blue);
}

/* ============================================================
 * DARK MODE - System Preference
 * ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Backgrounds */
        --bg-primary: #1A1A1A;
        --bg-main: #121212;
        --bg-sidebar: #1E1E1E;
        --bg-secondary: #1E1E1E;
        --bg-tertiary: #252525;
        --bg-light: #1F1F1F;
        --bg-elevated: #2A2A2A;
        --bg-card: #242424;

        /* Text */
        --text-primary: #F5F5F5;
        --text-secondary: #B3B3B3;
        --text-tertiary: #8A8A8A;
        --text-quaternary: #666666;

        /* Accent */
        --accent-blue: #5B9FE3;
        --accent-blue-light: rgba(91, 159, 227, 0.12);
        --accent-blue-hover: rgba(91, 159, 227, 0.18);
        --accent-blue-focus: rgba(91, 159, 227, 0.2);
        --accent-blue-bg: rgba(91, 159, 227, 0.08);
        --accent-blue-border: rgba(91, 159, 227, 0.4);
        --accent-blue-dark: #4A90D9;
        --accent-blue-gradient-end: #7BB3EA;

        /* Borders & Surfaces */
        --border-light: rgba(255, 255, 255, 0.08);
        --border-medium: rgba(255, 255, 255, 0.12);
        --surface-hover: rgba(255, 255, 255, 0.04);
        --surface-active: rgba(255, 255, 255, 0.08);
        --surface-elevated: #2A2A2A;

        /* Shadows */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
        --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
        --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
        --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);

        /* Accent Opacity Scale */
        --accent-blue-opacity-3: rgba(91, 159, 227, 0.05);
        --accent-blue-opacity-5: rgba(91, 159, 227, 0.08);
        --accent-blue-opacity-8: rgba(91, 159, 227, 0.12);
        --accent-blue-opacity-10: rgba(91, 159, 227, 0.15);
        --accent-blue-opacity-12: rgba(91, 159, 227, 0.18);
        --accent-blue-opacity-15: rgba(91, 159, 227, 0.2);
        --accent-blue-opacity-20: rgba(91, 159, 227, 0.25);

        /* Hover & Focus States */
        --hover-light: rgba(255, 255, 255, 0.04);
        --hover-accent: var(--accent-blue-opacity-8);
        --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-blue);
    }
}