/*
===============================================
CSS CUSTOM PROPERTIES & DESIGN SYSTEM
Professional Portfolio by Chinmoy Kumar Biswas
Version: 2.0.0
===============================================
*/

:root {
    /* ===== PRIMARY COLOR SYSTEM ===== */
    --primary-color: #00f5ff;
    --primary-50: #e6fffe;
    --primary-100: #ccfffd;
    --primary-200: #99fffa;
    --primary-300: #66fff8;
    --primary-400: #33fff5;
    --primary-500: #00f5ff;
    --primary-600: #00c4cc;
    --primary-700: #009399;
    --primary-800: #006266;
    --primary-900: #003133;

    /* ===== SECONDARY COLOR SYSTEM ===== */
    --secondary-color: #6366f1;
    --secondary-50: #eef2ff;
    --secondary-100: #e0e7ff;
    --secondary-200: #c7d2fe;
    --secondary-300: #a5b4fc;
    --secondary-400: #818cf8;
    --secondary-500: #6366f1;
    --secondary-600: #4f46e5;
    --secondary-700: #4338ca;
    --secondary-800: #3730a3;
    --secondary-900: #312e81;

    /* ===== ACCENT COLOR SYSTEM ===== */
    --accent-color: #ff6b35;
    --accent-50: #fff7ed;
    --accent-100: #ffedd5;
    --accent-200: #fed7aa;
    --accent-300: #fdba74;
    --accent-400: #fb923c;
    --accent-500: #ff6b35;
    --accent-600: #ea580c;
    --accent-700: #c2410c;
    --accent-800: #9a3412;
    --accent-900: #7c2d12;

    /* ===== STATUS COLORS ===== */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;

    /* ===== NEUTRAL COLOR SYSTEM ===== */
    --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;

    /* ===== LIGHT THEME COLORS ===== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.8);

    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-tertiary: #718096;
    --text-muted: #a0aec0;
    --text-inverse: #ffffff;

    --border-light: #e2e8f0;
    --border-medium: #cbd5e0;
    --border-strong: #a0aec0;

    /* ===== FONT SYSTEM ===== */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-serif: 'Merriweather', Georgia, serif;
    --font-mono: 'JetBrains Mono', Consolas, monospace;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --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;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* ===== SPACING SYSTEM ===== */
    --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;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.125rem;
    --radius-base: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-glow: 0 0 20px rgba(0, 245, 255, 0.3);

    /* ===== Z-INDEX SYSTEM ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal: 1050;
    --z-tooltip: 1070;

    /* ===== BREAKPOINTS ===== */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ===== GLASS EFFECTS ===== */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --bg-primary: #0a0e13;
    --bg-secondary: #0f141b;
    --bg-tertiary: #161b22;
    --bg-card: #1a1f26;
    --bg-elevated: #21262d;

    --text-primary: #e6e9ee;
    --text-secondary: #c9d1d9;
    --text-tertiary: #8b949e;
    --text-muted: #6e7681;

    --border-light: #30363d;
    --border-medium: #21262d;
    --border-strong: #484f58;

    --glass-bg: rgba(0, 0, 0, 0.3);
    --glass-border: rgba(255, 255, 255, 0.1);

    --gradient-card: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-primary: #0a0e13;
        --bg-secondary: #0f141b;
        --bg-tertiary: #161b22;
        --bg-card: #1a1f26;
        --bg-elevated: #21262d;

        --text-primary: #e6e9ee;
        --text-secondary: #c9d1d9;
        --text-tertiary: #8b949e;
        --text-muted: #6e7681;

        --border-light: #30363d;
        --border-medium: #21262d;
        --border-strong: #484f58;
    }
}