/**
 * Nebula Theme - CSS Variables
 * Modern Design System v3.0 - 2024/2025 Consumer Web Standards
 *
 * Design Principles:
 * - Mobile-first responsive design
 * - 8px grid spacing system
 * - 4px border radius scale
 * - Layered shadow system with depth
 * - Semantic color tokens
 * - Smooth micro-interactions
 */

/* ============================
   Modern CSS Custom Properties
   ============================ */
:root {
    /* ========== Breakpoints ========== */
    --nebula-breakpoint-xs: 480px;
    --nebula-breakpoint-sm: 576px;
    --nebula-breakpoint-md: 768px;
    --nebula-breakpoint-lg: 1024px;
    --nebula-breakpoint-xl: 1280px;
    --nebula-breakpoint-2xl: 1536px;

    /* ========== Container ========== */
    --nebula-container-max: 1200px;
    --nebula-container-article: 780px;
    --nebula-page-padding: 16px;
    --nebula-section-gap: 80px;

    /* ========== 8px Grid Spacing ========== */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --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;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ========== Typography - Enhanced Scale ========== */
    --nebula-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nebula-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --nebula-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */

    /* 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: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* Font Weights */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ========== Modern Border Radius (4px scale) ========== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ========== Shadows - Layered Depth System ========== */
    /* Soft shadows for cards */
    --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.06), 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.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Colored shadows for primary elements */
    --shadow-primary-sm: 0 1px 2px 0 rgba(14, 165, 233, 0.15);
    --shadow-primary: 0 4px 14px 0 rgba(14, 165, 233, 0.25);
    --shadow-primary-lg: 0 10px 24px 0 rgba(14, 165, 233, 0.35);

    /* ========== Colors - Semantic Design Tokens ========== */
    /* Primary - Vibrant Blue */
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;

    /* Neutral - Slate */
    --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;

    /* Success - Emerald */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;

    /* Warning - Amber */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;

    /* Error - Red */
    --error-50: #fef2f2;
    --error-100: #fee2e2;
    --error-200: #fecaca;
    --error-300: #fca5a5;
    --error-400: #f87171;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --error-700: #b91c1c;

    /* ========== Background Colors ========== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-inverse: #0f172a;

    /* ========== Text Colors ========== */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* ========== Border Colors ========== */
    --border-primary: #e2e8f0;
    --border-secondary: #f1f5f9;
    --border-focus: #0ea5e9;

    /* ========== Backdrop Blur ========== */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;

    /* ========== Transitions - Modern Easing ========== */
    --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-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;

    /* ========== Z-Index Scale ========== */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* ========== Layout ========== */
    --header-height: 64px;
    --header-height-mobile: 56px;
    --sidebar-width: 320px;
    --content-max-width: 720px;

    /* ========== Component Tokens ========== */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-height-xl: 56px;

    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
}

/* ============================
   Aliases (Backward Compatibility)
   ============================ */
:root {
    /* Spacing */
    --nebula-space-1: var(--space-1);
    --nebula-space-2: var(--space-2);
    --nebula-space-3: var(--space-3);
    --nebula-space-4: var(--space-4);
    --nebula-space-5: var(--space-5);
    --nebula-space-6: var(--space-6);
    --nebula-space-8: var(--space-8);
    --nebula-space-10: var(--space-10);
    --nebula-space-12: var(--space-12);
    --nebula-space-16: var(--space-16);

    /* Typography */
    --nebula-font-sans: var(--nebula-font-sans);
    --nebula-font-heading: var(--nebula-font-heading);
    --nebula-font-mono: var(--nebula-font-mono);
    --nebula-text-xs: var(--text-xs);
    --nebula-text-sm: var(--text-sm);
    --nebula-text-base: var(--text-base);
    --nebula-text-lg: var(--text-lg);
    --nebula-text-xl: var(--text-xl);
    --nebula-text-2xl: var(--text-2xl);
    --nebula-text-3xl: var(--text-3xl);
    --nebula-text-4xl: var(--text-4xl);
    --nebula-leading-tight: var(--leading-tight);
    --nebula-leading-normal: var(--leading-normal);
    --nebula-leading-relaxed: var(--leading-relaxed);
    --nebula-font-normal: var(--font-normal);
    --nebula-font-medium: var(--font-medium);
    --nebula-font-semibold: var(--font-semibold);
    --nebula-font-bold: var(--font-bold);

    /* Radius */
    --nebula-radius-sm: var(--radius-sm);
    --nebula-radius-md: var(--radius-md);
    --nebula-radius-lg: var(--radius-lg);
    --nebula-radius-xl: var(--radius-xl);
    --nebula-radius-2xl: var(--radius-2xl);
    --nebula-radius-full: var(--radius-full);

    /* Shadows */
    --nebula-shadow-sm: var(--shadow-sm);
    --nebula-shadow-md: var(--shadow-md);
    --nebula-shadow-lg: var(--shadow-lg);
    --nebula-shadow-xl: var(--shadow-xl);
    --nebula-shadow-card: var(--shadow-md);
    --nebula-shadow-card-hover: var(--shadow-lg);

    /* Colors */
    --nebula-primary: var(--primary-500);
    --nebula-primary-light: var(--primary-100);
    --nebula-primary-lighter: var(--primary-200);
    --nebula-primary-dark: var(--primary-600);
    --nebula-primary-hover: var(--primary-600);

    --nebula-secondary: var(--neutral-800);
    --nebula-secondary-light: var(--neutral-700);
    --nebula-secondary-lighter: var(--neutral-600);
    --nebula-secondary-dark: var(--neutral-900);

    --nebula-accent: var(--warning-500);
    --nebula-accent-light: var(--warning-100);
    --nebula-accent-dark: var(--warning-600);

    --nebula-bg: var(--bg-primary);
    --nebula-bg-secondary: var(--bg-secondary);
    --nebula-bg-tertiary: var(--bg-tertiary);

    --nebula-text: var(--text-primary);
    --nebula-text-secondary: var(--text-secondary);
    --nebula-text-muted: var(--text-muted);

    --nebula-border: var(--border-primary);

    --nebula-success: var(--success-500);
    --nebula-success-light: var(--success-100);
    --nebula-warning: var(--warning-500);
    --nebula-warning-light: var(--warning-100);
    --nebula-error: var(--error-500);
    --nebula-error-light: var(--error-100);
    --nebula-info: var(--primary-500);
    --nebula-info-light: var(--primary-100);

    /* Transitions */
    --nebula-duration-fast: var(--duration-fast);
    --nebula-duration-normal: var(--duration-normal);
    --nebula-duration-slow: var(--duration-slow);
    --nebula-ease-out: var(--ease-out);
    --nebula-ease-in-out: var(--ease-in-out);

    /* Z-Index */
    --nebula-z-dropdown: var(--z-dropdown);
    --nebula-z-sticky: var(--z-sticky);
    --nebula-z-fixed: var(--z-fixed);
    --nebula-z-modal-backdrop: var(--z-modal-backdrop);
    --nebula-z-modal: var(--z-modal);

    /* Layout */
    --nebula-container-max: var(--nebula-container-max);
    --nebula-header-height: var(--header-height);
}

/* ============================
   Dark Mode - Enhanced
   ============================ */
[data-theme="dark"],
body.dark-mode {
    /* Override with dark values */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;

    --border-primary: #334155;
    --border-secondary: #475569;

    /* Shadows for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* ============================
   CSS Reset Enhancements
   ============================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

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

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

/* ============================
   Scrollbar - Modern Style
   ============================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) var(--bg-secondary);
}