/* ============================================
   KARYASETU - DESIGN SYSTEM & THEME
   Modern Blue-Collar Platform
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* === Brand Colors === */
    --primary-hue: 220;
    --primary-sat: 85%;
    --primary-light: 55%;

    --primary-50: hsl(var(--primary-hue), var(--primary-sat), 95%);
    --primary-100: hsl(var(--primary-hue), var(--primary-sat), 85%);
    --primary-200: hsl(var(--primary-hue), var(--primary-sat), 75%);
    --primary-300: hsl(var(--primary-hue), var(--primary-sat), 65%);
    --primary-400: hsl(var(--primary-hue), var(--primary-sat), 60%);
    --primary-500: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
    --primary-600: hsl(var(--primary-hue), var(--primary-sat), 45%);
    --primary-700: hsl(var(--primary-hue), var(--primary-sat), 35%);
    --primary-800: hsl(var(--primary-hue), var(--primary-sat), 25%);
    --primary-900: hsl(var(--primary-hue), var(--primary-sat), 15%);

    /* === Accent Colors === */
    --accent-orange: hsl(25, 95%, 58%);
    --accent-orange-light: hsl(25, 95%, 68%);
    --accent-orange-dark: hsl(25, 95%, 48%);

    --accent-green: hsl(142, 71%, 45%);
    --accent-green-light: hsl(142, 71%, 55%);
    --accent-green-dark: hsl(142, 71%, 35%);

    --accent-purple: hsl(270, 70%, 60%);
    --accent-purple-light: hsl(270, 70%, 70%);
    --accent-purple-dark: hsl(270, 70%, 50%);

    /* === Semantic Colors === */
    --success: hsl(142, 71%, 45%);
    --warning: hsl(45, 93%, 47%);
    --error: hsl(0, 84%, 60%);
    --info: hsl(199, 89%, 48%);

    /* === Neutral Colors (Dark Mode Optimized) === */
    --gray-50: hsl(220, 20%, 98%);
    --gray-100: hsl(220, 18%, 94%);
    --gray-200: hsl(220, 16%, 88%);
    --gray-300: hsl(220, 14%, 75%);
    --gray-400: hsl(220, 12%, 60%);
    --gray-500: hsl(220, 10%, 45%);
    --gray-600: hsl(220, 12%, 35%);
    --gray-700: hsl(220, 14%, 25%);
    --gray-800: hsl(220, 16%, 18%);
    --gray-900: hsl(220, 18%, 12%);
    --gray-950: hsl(220, 20%, 8%);

    /* === Background & Surface === */
    --bg-primary: hsl(220, 18%, 10%);
    --bg-secondary: hsl(220, 16%, 14%);
    --bg-tertiary: hsl(220, 14%, 18%);
    --bg-elevated: hsl(220, 16%, 16%);

    /* === Text Colors === */
    --text-primary: hsl(220, 20%, 98%);
    --text-secondary: hsl(220, 14%, 75%);
    --text-tertiary: hsl(220, 12%, 60%);
    --text-disabled: hsl(220, 10%, 45%);

    /* === Borders === */
    --border-primary: hsl(220, 14%, 25%);
    --border-secondary: hsl(220, 12%, 20%);
    --border-focus: var(--primary-500);

    /* === Shadows === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

    --shadow-glow: 0 0 20px rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.3);
    --shadow-glow-strong: 0 0 30px rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.5);

    /* === Spacing === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* === Border Radius === */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* === Typography === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', var(--font-sans);

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

    /* === Transitions === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === Z-Index === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* === Light Mode Override === */
[data-theme="light"] {
    --bg-primary: hsl(220, 20%, 98%);
    --bg-secondary: hsl(220, 18%, 94%);
    --bg-tertiary: hsl(220, 16%, 88%);
    --bg-elevated: hsl(0, 0%, 100%);

    --text-primary: hsl(220, 18%, 12%);
    --text-secondary: hsl(220, 12%, 35%);
    --text-tertiary: hsl(220, 10%, 45%);
    --text-disabled: hsl(220, 12%, 60%);

    --border-primary: hsl(220, 16%, 88%);
    --border-secondary: hsl(220, 18%, 94%);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --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.25);
}

/* === Gradient Definitions === */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-purple) 100%);
}

.gradient-success {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--success) 100%);
}

.gradient-mesh {
    background:
        radial-gradient(at 0% 0%, var(--primary-900) 0px, transparent 50%),
        radial-gradient(at 100% 0%, var(--primary-800) 0px, transparent 50%),
        radial-gradient(at 100% 100%, var(--primary-900) 0px, transparent 50%),
        radial-gradient(at 0% 100%, var(--primary-800) 0px, transparent 50%),
        var(--bg-primary);
}

/* === Glassmorphism === */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Additional Button Colors if not present */
.btn-info {
    background-color: var(--info);
    color: white;
}
.btn-info:hover {
    filter: brightness(1.1);
}

.btn-warning {
    background-color: var(--warning);
    color: white;
}
.btn-warning:hover {
    filter: brightness(1.1);
}