/**
 * CSS Variables - Design System
 * Centralized color, spacing, and design tokens
 * Updated to match project.html design system
 */

:root {
    /* === COLORS === */

    /* Brand Colors - Blue Theme */
    --primary: #1E3A8A;        /* Dark Blue - Professional, trustworthy */
    --primary-dark: #1e40af;   /* Darker blue for accents */
    --primary-light: #3b82f6;  /* Lighter blue for hover states */
    --primary-subtle: #60a5fa; /* Subtle blue for backgrounds */

    /* Secondary Colors */
    --secondary: #22C55E;      /* Green - Success, active states */
    --secondary-dark: #16a34a;
    --secondary-light: #4ade80;

    /* Accent Colors */
    --accent: #FFFFFF;         /* Pure White - Contrast, clarity */
    --accent-dark: #f9fafb;
    --accent-light: #ffffff;

    /* Status Colors */
    --danger: #EF4444;         /* Red - Errors, threats */
    --warning: #FDE047;        /* Yellow - Warnings, attention */
    --success: #22C55E;        /* Green - Safe/Success */
    --info: #3b82f6;           /* Blue - Information */

    /* Neutral Colors (White Theme) */
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;

    /* Semantic Colors (White Background Theme) */
    --text-primary: #111827;        /* Almost black - primary text */
    --text-secondary: #6b7280;      /* Gray - secondary text */
    --text-tertiary: #9ca3af;       /* Light gray - subtle text */
    --text-inverse: #FFFFFF;        /* White text for dark backgrounds */
    --text-muted: #9ca3af;          /* Muted text */

    --bg-primary: #FFFFFF;          /* Main background - white */
    --bg-secondary: #f9fafb;        /* Elevated surfaces - very light gray */
    --bg-tertiary: #f3f4f6;         /* Highest elevation - light gray */

    /* Border Colors - Standardized from project.html */
    --border: #e5e7eb;              /* Standard borders - FROM PROJECT */
    --border-light: #f3f4f6;
    --border-medium: #d1d5db;       /* Medium contrast borders */
    --border-dark: #9ca3af;         /* Darker borders */

    /* Legacy aliases for compatibility */
    --error: var(--danger);

    /* === SPACING SYSTEM - FROM PROJECT.HTML === */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 0.75rem;   /* 12px - FIXED */
    --spacing-lg: 1rem;      /* 16px - FIXED */
    --spacing-xl: 1.25rem;   /* 20px - FIXED */
    --spacing-2xl: 1.5rem;   /* 24px - FIXED */
    --spacing-3xl: 2rem;     /* 32px - FIXED */
    --spacing-4xl: 2.5rem;   /* 40px */
    --spacing-5xl: 3rem;     /* 48px */

    /* === BOX SIZING SYSTEM - FROM PROJECT.HTML === */

    /* Container Widths */
    --container-sm: 640px;       /* Small container */
    --container-md: 60%;       /* Medium container (legacy max-content-width) */
    --container-lg: 1024px;      /* Large container */
    --container-xl: 750px;      /* Extra large container - PROJECT DEFAULT */
    --container-2xl: 1400px;     /* 2X large container */
    --container-wide: 910px;     /* Wide container for check page */

    /* Card/Section Padding - FROM PROJECT.HTML */
    --padding-card: 1.5rem;        /* 32px - Standard card padding */
    --padding-section: 1.5rem;   /* 24px - Section padding */
    --padding-compact: 1rem;     /* 16px - Compact padding */

    /* Content Gaps - FROM PROJECT.HTML */
    --gap-xs: 0.25rem;           /* 4px */
    --gap-sm: 0.5rem;            /* 8px */
    --gap-md: 0.75rem;           /* 12px - Standard gap */
    --gap-lg: 1rem;              /* 16px */
    --gap-xl: 1.5rem;            /* 24px - Section gap */
    --gap-2xl: 2rem;             /* 32px */

    /* === TYPOGRAPHY === */

    /* Font Families */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* Font Sizes - FROM PROJECT.HTML */
    --text-xs: 0.75rem;      /* 12px - Small text, badges */
    --text-sm: 0.875rem;     /* 14px - Base text, buttons, labels */
    --text-base: 1rem;       /* 16px - Body text */
    --text-lg: 1.125rem;     /* 18px - Large body */
    --text-xl: 1.25rem;      /* 20px - H3 */
    --text-2xl: 1.5rem;      /* 24px - H2 */
    --text-3xl: 1.875rem;    /* 30px - Large H1 */
    --text-4xl: 2.25rem;     /* 36px - Display */
    --text-5xl: 3rem;        /* 48px - Hero */

    /* Font Weights - FROM PROJECT.HTML */
    --font-normal: 400;      /* Body text */
    --font-medium: 500;      /* Buttons, labels - PROJECT DEFAULT */
    --font-semibold: 600;    /* Subheadings */
    --font-bold: 700;        /* Main headings */

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* === BORDERS - FROM PROJECT.HTML === */
    --border-radius-sm: 0.375rem;  /* 6px - Small elements, badges */
    --border-radius-md: 0.5rem;    /* 8px - Buttons, inputs - PROJECT DEFAULT */
    --border-radius-lg: 0.75rem;   /* 12px - Cards, sections */
    --border-radius-xl: 1rem;      /* 16px - Large containers - PROJECT DEFAULT */
    --border-radius-2xl: 1.5rem;   /* 24px - Extra large */
    --border-radius-full: 9999px;  /* Full circle */

    --border-width: 1px;
    --border-width-thick: 2px;

    /* === SHADOWS - FROM PROJECT.HTML === */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);                    /* Subtle lift - PROJECT DEFAULT */
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);                    /* Card hover - PROJECT DEFAULT */
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);                   /* Modals */
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);                   /* Overlays */

    /* Colored Shadows - FROM PROJECT.HTML */
    --shadow-primary: 0 4px 12px rgba(34, 197, 94, 0.4);          /* Success button shadow */
    --shadow-danger: 0 8px 20px rgba(220, 38, 38, 0.3);           /* Danger state */
    --shadow-warning: 0 8px 20px rgba(253, 224, 71, 0.4);         /* Warning state */

    /* === TRANSITIONS - FROM PROJECT.HTML === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 0.2s ease;        /* PROJECT DEFAULT - Faster, snappier */
    --transition-slow: 300ms ease-in-out;

    /* === Z-INDEX SCALE === */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-modal: 100;
    --z-overlay: 99;
    --z-toast: 110;
    --z-tooltip: 120;

    /* === LAYOUT - FROM PROJECT.HTML === */
    --sidebar-width: 225px;
    --header-height: 64px;
    --max-content-width: 60%;          /* Legacy - use --container-md */

    /* Button Sizing - FROM PROJECT.HTML */
    --button-padding-x: 1rem;            /* 16px - Horizontal button padding */
    --button-padding-y: 0.75rem;         /* 12px - Vertical button padding */
    --button-gap: 0.5rem;                /* 8px - Gap inside buttons */

    /* Input Sizing - FROM PROJECT.HTML */
    --input-padding-x: 1rem;             /* 16px - Horizontal input padding */
    --input-padding-y: 0.75rem;          /* 12px - Vertical input padding */

    /* === GRADIENTS === (Blue Theme) */
    --gradient-primary: linear-gradient(135deg, #1E3A8A 0%, #3b82f6 100%);
    --gradient-secondary: linear-gradient(to right, #22C55E, #16a34a);
    --gradient-accent: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --gradient-ai: linear-gradient(135deg, #1E3A8A 0%, #22C55E 100%);
    --gradient-subtle: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);

    /* === OVERLAY COLORS - FROM PROJECT.HTML === */
    --overlay-white-10: rgba(255, 255, 255, 0.1);    /* On gradient backgrounds */
    --overlay-white-15: rgba(255, 255, 255, 0.15);   /* Button on gradient */
    --overlay-white-25: rgba(255, 255, 255, 0.25);   /* Button hover on gradient */
    --overlay-white-30: rgba(255, 255, 255, 0.3);    /* Border on gradient */
    --overlay-green-05: rgba(34, 197, 94, 0.05);     /* Active/selected background */
    --overlay-green-03: rgba(34, 197, 94, 0.03);     /* Subtle decorative overlay */

    /* === GLASSMORPHISM - FROM PROJECT.HTML === */
    --glass-bg: rgba(255, 255, 255, 0.98);           /* Card background */
    --glass-blur: blur(15px);                        /* Backdrop blur */
}