/* ===================================
   E-Care 2.0 Design System
   Dual Theme — Light (default) + Dark
   Matching 개발계획서 design tokens
   =================================== */

:root {
    /* ===================================
       Color Palette — Cool Blue (shared)
       =================================== */
    
    /* Primary Colors (Cyan-Blue) */
    --primary-50: rgba(14,165,233,0.06);
    --primary-100: rgba(14,165,233,0.12);
    --primary-200: rgba(14,165,233,0.2);
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    
    /* Main Color Variables */
    --color-primary: #0ea5e9;
    --color-primary-light: #38bdf8;
    --color-primary-dark: #0284c7;
    --color-primary-glow: rgba(14,165,233,0.35);
    
    /* Secondary Colors (Emerald) */
    --secondary-50: rgba(52,211,153,0.06);
    --secondary-100: rgba(52,211,153,0.12);
    --secondary-200: rgba(52,211,153,0.2);
    --secondary-300: #6ee7b7;
    --secondary-400: #34d399;
    --secondary-500: #10b981;
    --secondary-600: #059669;
    --secondary-700: #047857;
    --secondary-800: #065f46;
    --secondary-900: #064e3b;
    
    /* Accent Colors (Gold) */
    --accent-50: rgba(251,191,36,0.06);
    --accent-100: rgba(251,191,36,0.12);
    --accent-200: rgba(251,191,36,0.2);
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f59e0b;
    --accent-600: #d97706;
    --accent-700: #b45309;
    --accent-800: #92400e;
    --accent-900: #78350f;
    
    /* Purple */
    --purple-400: #a78bfa;
    --purple-500: #8b5cf6;
    --purple-glow: rgba(139,92,246,0.25);
    
    /* Pink */
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-glow: rgba(236,72,153,0.25);
    
    /* Status Colors */
    --success-50: rgba(34,197,94,0.08);
    --success-500: #22c55e;
    --success-700: #15803d;
    
    --warning-50: rgba(245,158,11,0.08);
    --warning-500: #f59e0b;
    --warning-700: #b45309;
    
    --danger-50: rgba(239,68,68,0.08);
    --danger-500: #ef4444;
    --danger-700: #b91c1c;
    
    --info-50: rgba(14,165,233,0.08);
    --info-500: #0ea5e9;
    --info-700: #0369a1;
    
    /* Neutral Colors */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    
    /* Component Color Variables (shared) */
    --color-secondary: #34d399;
    --color-accent: #fbbf24;
    
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #0ea5e9;
    
    /* ===================================
       Typography
       =================================== */
    
    --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Noto Sans KR', -apple-system, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* ===================================
       Spacing
       =================================== */
    
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    
    /* ===================================
       Sizing
       =================================== */
    
    --w-sidebar: 260px;
    --w-sidebar-collapsed: 72px;
    --w-main-content: calc(100% - var(--w-sidebar));
    
    --h-header: 64px;
    --h-mobile-nav: 60px;
    
    --max-w-xs: 20rem;
    --max-w-sm: 24rem;
    --max-w-md: 28rem;
    --max-w-lg: 32rem;
    --max-w-xl: 36rem;
    --max-w-2xl: 42rem;
    --max-w-3xl: 48rem;
    --max-w-4xl: 56rem;
    --max-w-5xl: 64rem;
    --max-w-6xl: 72rem;
    --max-w-7xl: 80rem;
    --max-w-full: 100%;
    
    /* ===================================
       Border Radius
       =================================== */
    
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-base: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* ===================================
       Z-Index
       =================================== */
    
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ===================================
       Transitions
       =================================== */
    
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    --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);
    
    /* ===================================
       Breakpoints
       =================================== */
    
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* ===================================
       Component-Specific (shared)
       =================================== */
    
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    
    --input-height-sm: 32px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
}

/* ===================================
   LIGHT THEME (default)
   =================================== */
:root,
[data-theme="light"] {
    --bg-deep: #f1f5f9;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-dark: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-surface: rgba(255,255,255,0.85);
    
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;
    --text-white: #1e293b;
    
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;
    
    --glass-bg: rgba(255,255,255,0.85);
    --glass-bg-light: rgba(248,250,252,0.8);
    --glass-border: #e2e8f0;
    --glass-blur: 20px;
    
    --color-secondary-light: rgba(52,211,153,0.1);
    --color-accent-light: rgba(251,191,36,0.1);
    --color-success-light: rgba(34,197,94,0.08);
    --color-warning-light: rgba(245,158,11,0.08);
    --color-danger-light: rgba(239,68,68,0.08);
    --color-info-light: rgba(14,165,233,0.08);
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-hover: #f1f5f9;
    
    --color-text-primary: #1e293b;
    --color-text-secondary: #475569;
    --color-text-tertiary: #94a3b8;
    
    --color-border: #e2e8f0;
    
    /* Shadows — Light soft */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-base: 0 4px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 16px 32px rgba(0,0,0,0.08);
    --shadow-xl: 0 24px 48px rgba(0,0,0,0.1);
    --shadow-2xl: 0 32px 64px rgba(0,0,0,0.12);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);
    --shadow-glow-primary: 0 0 20px rgba(14,165,233,0.12);
    --shadow-glow-success: 0 0 20px rgba(34,197,94,0.12);
    --shadow-glow-danger: 0 0 20px rgba(239,68,68,0.12);
    
    /* Card / Sidebar */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-xl);
    --card-bg: var(--glass-bg);
    --card-border: var(--glass-border);
    
    --sidebar-bg: #ffffff;
    --sidebar-border: #e2e8f0;
    --sidebar-active-bg: rgba(14,165,233,0.08);
    --sidebar-active-color: var(--color-primary);
    --sidebar-hover-bg: rgba(14,165,233,0.04);
    
    /* Theme-specific utility */
    --input-bg: rgba(241,245,249,0.8);
    --input-bg-focus: rgba(241,245,249,1);
    --select-option-bg: #ffffff;
    --select-option-color: #1e293b;
    --chart-point-border: #ffffff;
    --popup-bg: rgba(255,255,255,0.96);
    --popup-shadow: 0 8px 32px rgba(0,0,0,0.12);
    --chip-bg: rgba(241,245,249,0.8);
    --overlay-bg: rgba(241,245,249,0.85);
}

/* ===================================
   DARK THEME
   =================================== */
[data-theme="dark"] {
    --bg-deep: #020617;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-dark: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --bg-surface: rgba(15,23,42,0.7);
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-inverse: #0f172a;
    --text-white: #ffffff;
    
    --border-light: rgba(56,189,248,0.12);
    --border-medium: rgba(56,189,248,0.2);
    --border-dark: rgba(56,189,248,0.3);
    
    --glass-bg: rgba(15,23,42,0.7);
    --glass-bg-light: rgba(30,41,59,0.6);
    --glass-border: rgba(56,189,248,0.15);
    --glass-blur: 20px;
    
    --color-secondary-light: rgba(52,211,153,0.12);
    --color-accent-light: rgba(251,191,36,0.12);
    --color-success-light: rgba(34,197,94,0.1);
    --color-warning-light: rgba(245,158,11,0.1);
    --color-danger-light: rgba(239,68,68,0.1);
    --color-info-light: rgba(14,165,233,0.1);
    
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-hover: #334155;
    
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-tertiary: #64748b;
    
    --color-border: rgba(56,189,248,0.12);
    
    /* Shadows — Dark glow */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(56,189,248,0.05);
    --shadow-base: 0 4px 8px rgba(0,0,0,0.3), 0 0 0 1px rgba(56,189,248,0.06);
    --shadow-md: 0 8px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(56,189,248,0.08);
    --shadow-lg: 0 16px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(56,189,248,0.1);
    --shadow-xl: 0 24px 48px rgba(0,0,0,0.4);
    --shadow-2xl: 0 32px 64px rgba(0,0,0,0.5);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.3);
    --shadow-glow-primary: 0 0 20px rgba(14,165,233,0.2), 0 0 40px rgba(14,165,233,0.1);
    --shadow-glow-success: 0 0 20px rgba(34,197,94,0.2);
    --shadow-glow-danger: 0 0 20px rgba(239,68,68,0.2);
    
    /* Card / Sidebar */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-xl);
    --card-bg: var(--glass-bg);
    --card-border: var(--glass-border);
    
    --sidebar-bg: var(--bg-primary);
    --sidebar-border: var(--border-light);
    --sidebar-active-bg: rgba(14,165,233,0.1);
    --sidebar-active-color: var(--color-primary-light);
    --sidebar-hover-bg: rgba(14,165,233,0.06);
    
    /* Theme-specific utility */
    --input-bg: rgba(15,23,42,0.6);
    --input-bg-focus: rgba(15,23,42,0.8);
    --select-option-bg: #0f172a;
    --select-option-color: #e2e8f0;
    --chart-point-border: #0f172a;
    --popup-bg: rgba(15,23,42,0.95);
    --popup-shadow: 0 8px 32px rgba(0,0,0,0.4);
    --chip-bg: rgba(15,23,42,0.5);
    --overlay-bg: rgba(15,23,42,0.85);
}

/* ===================================
   Theme transition (smooth switch)
   =================================== */
html[data-theme] body,
html[data-theme] .sidebar,
html[data-theme] .main-content,
html[data-theme] .header-bar,
html[data-theme] .card,
html[data-theme] .nav-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===================================
   Animations — Global Keyframes
   =================================== */

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}