/**
 * Design System Variables
 * Modern Minimal Dashboard Design System
 * Inspired by Linear, Vercel, Stripe
 */

:root {
    /* ==========================================
       COLOR PALETTE
       ========================================== */

    /* Primary Blue Scale */
    --primary-50: #EFF6FF;
    --primary-100: #DBEAFE;
    --primary-200: #BFDBFE;
    --primary-300: #93C5FD;
    --primary-400: #60A5FA;
    --primary-500: #0066FF;
    --primary-600: #0052CC;
    --primary-700: #003D99;
    --primary-800: #002966;
    --primary-900: #001433;

    /* Neutral Scale (Slate) */
    --neutral-0: #FFFFFF;
    --neutral-50: #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;
    --neutral-950: #020617;

    /* Semantic Colors */
    --success-50: #ECFDF5;
    --success-100: #D1FAE5;
    --success-500: #10B981;
    --success-600: #059669;
    --success-700: #047857;

    --warning-50: #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;

    --danger-50: #FEF2F2;
    --danger-100: #FEE2E2;
    --danger-500: #EF4444;
    --danger-600: #DC2626;
    --danger-700: #B91C1C;

    --info-50: #EFF6FF;
    --info-100: #DBEAFE;
    --info-500: #3B82F6;
    --info-600: #2563EB;
    --info-700: #1D4ED8;

    /* ==========================================
       SEMANTIC ALIASES
       ========================================== */

    /* Backgrounds */
    --bg-page: var(--neutral-50);
    --bg-card: var(--neutral-0);
    --bg-sidebar: var(--neutral-900);
    --bg-sidebar-hover: var(--neutral-800);
    --bg-sidebar-active: var(--primary-500);
    --bg-header: var(--neutral-0);
    --bg-input: var(--neutral-0);
    --bg-input-disabled: var(--neutral-100);
    --bg-hover: var(--neutral-50);
    --bg-active: var(--primary-50);

    /* Text Colors */
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-500);
    --text-muted: var(--neutral-400);
    --text-inverse: var(--neutral-0);
    --text-sidebar: var(--neutral-400);
    --text-sidebar-active: var(--neutral-0);
    --text-link: var(--primary-500);
    --text-link-hover: var(--primary-600);

    /* Borders */
    --border-color: var(--neutral-200);
    --border-light: var(--neutral-100);
    --border-dark: var(--neutral-300);
    --border-focus: var(--primary-500);

    /* ==========================================
       TYPOGRAPHY
       ========================================== */

    /* Font Family */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

    /* Font Sizes */
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 28px;
    --text-5xl: 32px;
    --text-6xl: 40px;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

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

    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 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-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;

    /* ==========================================
       LAYOUT
       ========================================== */

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;

    /* Header */
    --header-height: 64px;

    /* Content */
    --content-max-width: 1400px;
    --content-padding: 24px;
    --content-padding-mobile: 16px;

    /* ==========================================
       SHADOWS
       ========================================== */

    --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.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --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.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Colored Shadows */
    --shadow-primary: 0 4px 14px rgba(0, 102, 255, 0.25);
    --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
    --shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25);

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

    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-full: 9999px;

    /* ==========================================
       TRANSITIONS
       ========================================== */

    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.3s ease;
    --transition-slower: 0.5s ease;

    /* Timing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

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

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-sidebar: 400;
    --z-header: 500;
    --z-overlay: 600;
    --z-modal: 700;
    --z-popover: 800;
    --z-tooltip: 900;
    --z-toast: 1000;
}

/* ==========================================
   DARK MODE VARIABLES (Future)
   ========================================== */

[data-theme="dark"] {
    --bg-page: var(--neutral-950);
    --bg-card: var(--neutral-900);
    --bg-sidebar: var(--neutral-950);
    --bg-sidebar-hover: var(--neutral-900);
    --bg-header: var(--neutral-900);
    --bg-input: var(--neutral-800);
    --bg-hover: var(--neutral-800);

    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-400);
    --text-muted: var(--neutral-500);

    --border-color: var(--neutral-800);
    --border-light: var(--neutral-900);
    --border-dark: var(--neutral-700);
}

/* ==========================================
   BASE STYLES
   ========================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-page);
    margin: 0;
    padding: 0;
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--primary-100);
    color: var(--primary-900);
}