/**
 * ============================================
 * Next Tab - 글로벌 스타일시트
 * ============================================
 * 작성일: 2024-12-18
 * 설명: 다크 테마 + 사이버펑크 감성 + 애니메이션
 * ============================================
 */

/* ==================== 1. CSS 변수 정의 ==================== */
:root {
    /* 
     * Trendy Color System (UI/UX 2.0)
     * Base: Slate (Cool Gray) & Deep Black
     */

    /* Default: Cyberpunk Green (The Matrix Redefined) */
    --color-primary: #05f26c;
    --color-primary-rgb: 5, 242, 108;
    /* Neon Mint */
    --color-primary-dark: #00c754;
    --color-primary-light: #6efeb5;

    --color-bg-light: #f6f8f7;
    --color-bg-dark: #050a07;
    /* Deepest Green Black */
    --color-bg-card: rgba(20, 30, 25, 0.7);
    /* More transparent, glass-like */
    --color-bg-card-hover: rgba(20, 30, 25, 0.95);

    --color-text-white: #ffffff;
    --color-text-gray: #9ca3af;
    /* Gray 400 - Better readability on dark */
    --color-text-dark: #020617;

    /* 그라데이션 */
    --gradient-primary: linear-gradient(135deg, #05f26c, #6efeb5);
    --gradient-dark: linear-gradient(180deg, rgba(5, 10, 7, 0.8), #050a07);

    /* 간격 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* 네비게이션 바 */
    --color-bg-navbar: rgba(17, 23, 20, 0.5);
    --color-border-navbar: rgba(255, 255, 255, 0.1);

    /* Shadow System (Crisp & Deep) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 32px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 4px 14px 0 rgba(var(--color-primary-rgb), 0.3);
    --shadow-glow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);

    /* Border Radius (Premium) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions (Optimized) */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Font System */
    --font-heading: 'Outfit', 'Spline Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ==================== 테마 정의 ==================== */

/* 1. Cyberpunk Green (Default) */
[data-theme="green"] {
    --color-primary: #05f26c;
    --color-primary-rgb: 5, 242, 108;
    --color-primary-dark: #00c754;
    --color-primary-light: #6efeb5;
    --color-bg-light: #f6f8f7;
    --color-bg-dark: #050a07;
    --color-bg-card: rgba(20, 30, 25, 0.7);
    --color-bg-card-hover: rgba(20, 30, 25, 0.95);
    --color-text-white: #ffffff;
    --color-text-gray: #9ca3af;
    --color-text-dark: #020617;
    --gradient-primary: linear-gradient(135deg, #05f26c, #6efeb5);
    --gradient-dark: linear-gradient(180deg, rgba(5, 10, 7, 0.8), #050a07);
}

/* 2. Ocean Blue - "Deep Sea Tech" */
[data-theme="blue"] {
    --color-primary: #38bdf8;
    --color-primary-rgb: 56, 189, 248;
    /* Sky 400 */
    --color-primary-dark: #0ea5e9;
    /* Sky 500 */
    --color-primary-light: #bae6fd;
    /* Sky 200 */
    --color-bg-light: #f0f9ff;
    --color-bg-dark: #020617;
    /* Slate 950 */
    --color-bg-card: rgba(15, 23, 42, 0.7);
    --color-bg-card-hover: rgba(15, 23, 42, 0.95);
    --color-text-white: #ffffff;
    --color-text-gray: #94a3b8;
    /* Slate 400 */
    --color-text-dark: #020617;
    --gradient-primary: linear-gradient(135deg, #38bdf8, #7dd3fc);
    --gradient-dark: linear-gradient(180deg, rgba(2, 6, 23, 0.8), #020617);
    --color-bg-navbar: rgba(15, 23, 42, 0.5);
    --color-border-navbar: rgba(255, 255, 255, 0.1);
}

/* 3. Purple Neon - "Cyber Void" */
[data-theme="purple"] {
    --color-primary: #d946ef;
    --color-primary-rgb: 217, 70, 239;
    /* Fuchsia 500 */
    --color-primary-dark: #c026d3;
    /* Fuchsia 600 */
    --color-primary-light: #f0abfc;
    /* Fuchsia 300 */
    --color-bg-light: #fae8ff;
    --color-bg-dark: #0f0518;
    /* Deep Violet Black */
    --color-bg-card: rgba(25, 10, 40, 0.7);
    --color-bg-card-hover: rgba(25, 10, 40, 0.95);
    --color-text-white: #ffffff;
    --color-text-gray: #e879f9;
    /* Lighter Purple/Gray */
    --color-text-dark: #2e1065;
    --gradient-primary: linear-gradient(135deg, #d946ef, #e879f9);
    --gradient-dark: linear-gradient(180deg, rgba(14, 2, 14, 0.8), #0e020e);
    --color-bg-navbar: rgba(20, 5, 20, 0.5);
    --color-border-navbar: rgba(255, 255, 255, 0.1);
}

/* 4. Sunset Orange - "Mars Dust" */
[data-theme="orange"] {
    --color-primary: #f97316;
    --color-primary-rgb: 249, 115, 22;
    /* Orange 500 */
    --color-primary-dark: #ea580c;
    /* Orange 600 */
    --color-primary-light: #fdba74;
    /* Orange 300 */
    --color-bg-light: #fff7ed;
    --color-bg-dark: #0c0402;
    /* Deep Red Black */
    --color-bg-card: rgba(30, 15, 10, 0.7);
    --color-bg-card-hover: rgba(30, 15, 10, 0.95);
    --color-text-white: #ffffff;
    --color-text-gray: #fdba74;
    --color-text-dark: #431407;
    --gradient-primary: linear-gradient(135deg, #ffab00, #ffd600);
    --gradient-dark: linear-gradient(180deg, rgba(26, 14, 2, 0.8), #1a0e02);
    --color-bg-navbar: rgba(26, 14, 2, 0.5);
    --color-border-navbar: rgba(255, 255, 255, 0.1);
}

/* 5. Rose Pink - "Neon Heart" */
[data-theme="pink"] {
    --color-primary: #fb7185;
    --color-primary-rgb: 251, 113, 133;
    /* Rose 400 */
    --color-primary-dark: #f43f5e;
    /* Rose 500 */
    --color-primary-light: #fda4af;
    /* Rose 300 */
    --color-bg-light: #fff1f2;
    --color-bg-dark: #0f0205;
    /* Deep Rose Black */
    --color-bg-card: rgba(30, 10, 15, 0.7);
    --color-bg-card-hover: rgba(30, 10, 15, 0.95);
    --color-text-white: #ffffff;
    --color-text-gray: #fda4af;
    --color-text-dark: #881337;
    --gradient-primary: linear-gradient(135deg, #fb7185, #fda4af);
    --gradient-dark: linear-gradient(180deg, rgba(15, 2, 5, 0.8), #0f0205);
    --color-bg-navbar: rgba(30, 10, 15, 0.5);
    --color-border-navbar: rgba(255, 255, 255, 0.1);
}

/* 6. White Classic - "Clean Blue" */
[data-theme="white"] {
    --color-primary: #2563eb;
    --color-primary-rgb: 37, 99, 235;
    /* Blue 600 */
    --color-primary-dark: #1d4ed8;
    /* Blue 700 */
    --color-primary-light: #60a5fa;
    /* Blue 400 */
    --color-bg-light: #ffffff;
    --color-bg-dark: #f8fafc;
    /* Slate 50 */
    --color-bg-card: rgba(255, 255, 255, 0.85);
    /* Proper transparency */
    --color-bg-card-hover: rgba(255, 255, 255, 1);
    --color-text-white: #0f172a;
    /* Slate 900 (Black replacement) */
    --color-text-gray: #475569;
    /* Slate 600 */
    --color-text-dark: #0f172a;
    --gradient-primary: linear-gradient(135deg, #2563eb, #60a5fa);
    --gradient-dark: linear-gradient(180deg, rgba(248, 250, 252, 0.85), #f8fafc);
    --color-bg-navbar: rgba(255, 255, 255, 0.8);
    --color-border-navbar: rgba(0, 0, 0, 0.1);
}

/* 7. Light Mode - "Clean Emerald" */
[data-theme="light"] {
    --color-primary: #059669;
    --color-primary-rgb: 5, 150, 105;
    /* Emerald 600 */
    --color-primary-dark: #047857;
    /* Emerald 700 */
    --color-primary-light: #10b981;
    /* Emerald 500 */
    --color-bg-light: #ffffff;
    --color-bg-dark: #f8fafc;
    /* Slate 50 */
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-bg-card-hover: rgba(255, 255, 255, 1);
    --color-text-white: #0f172a;
    /* Slate 900 */
    --color-text-gray: #475569;
    /* Slate 600 */
    --color-text-dark: #0f172a;
    --gradient-primary: linear-gradient(135deg, #059669, #34d399);
    --gradient-dark: linear-gradient(180deg, rgba(248, 250, 252, 0.85), #f8fafc);
    --color-bg-navbar: rgba(255, 255, 255, 0.8);
    --color-border-navbar: rgba(0, 0, 0, 0.1);
}

/* 8. Teal Abstract - "3D Geometric Art" */
[data-theme="teal"] {
    --color-primary: #4ECDC4;
    --color-primary-rgb: 78, 205, 196;
    /* Tiffany Blue */
    --color-primary-dark: #2C5F5D;
    /* Dark Teal */
    --color-primary-light: #7FE5DD;
    /* Light Teal */
    --color-bg-light: #F7F3E9;
    --color-bg-dark: #F7F3E9;
    /* Cream background */
    --color-bg-card: rgba(255, 255, 255, 0.6);
    /* Soft white cards */
    --color-bg-card-hover: rgba(255, 255, 255, 0.9);
    --color-text-white: #1A1A1A;
    /* Dark text for light bg */
    --color-text-gray: #5A5A5A;
    /* Medium gray */
    --color-text-dark: #1A1A1A;
    --gradient-primary: linear-gradient(135deg, #4ECDC4, #7FE5DD);
    --gradient-dark: linear-gradient(180deg, rgba(247, 243, 233, 0.95), #F7F3E9);
    --color-bg-navbar: rgba(255, 255, 255, 0.85);
    --color-border-navbar: rgba(78, 205, 196, 0.2);
    --color-accent: #FF9966;
    /* Orange accent */
}