/**
 * Design System - CSS Variables / Tokens
 * Shared between Client and Admin
 */

:root {
    /* Colors - Primary palette */
    --primary: #3B82F6;
    --primary-hover: #2563EB;
    --primary-light: rgba(59, 130, 246, 0.2);
    --primary-glow: rgba(59, 130, 246, 0.4);

    /* Backgrounds */
    --bg-color: #03030a;
    --bg-dark: #03030a;
    --bg-card: rgba(10, 10, 22, 0.5);
    --bg-card-hover: rgba(15, 15, 35, 0.65);
    --bg-input: rgba(15, 15, 30, 0.6);
    --bg-input-focus: rgba(20, 20, 40, 0.7);
    --bg-modal: rgba(8, 8, 20, 0.85);
    --bg-header: rgba(5, 5, 18, 0.7);
    --bg-sidebar: rgba(5, 5, 18, 0.75);
    --bg-overlay: rgba(3, 3, 10, 0.85);

    /* Text */
    --text-color: #ffffff;
    --text-muted: #9ca3af;
    --text-secondary: #d1d5db;
    --heading: #ffffff;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.07);
    --border-medium: rgba(255, 255, 255, 0.09);
    --border-focus: rgba(59, 130, 246, 0.5);

    /* Input */
    --input-bg: #1f1f1f;
    --input-border: #424242;
    --input-hover-border: #3B82F6;
    --input-focus-border: #2563EB;
    --input-focus-ring: rgba(59, 130, 246, 0.2);

    /* Radius */
    --radius: 0.5rem;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-header: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    /* Status colors */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.2);
    --warning: #fbbf24;
    --danger: #ef4444;

    /* Legacy compatibility */
    --chalk: rgba(255, 255, 255, 0.03);
    --text: #d1d5db;
    --border: rgba(255, 255, 255, 0.05);
    --white: #ffffff;
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --primary-foreground: 0 85.7% 97.3%;
    --secondary: 0 0% 14.9%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --ring: 0 72.2% 50.6%;

    /* Layout */
    --sidebar-width: 280px;
    --sidebar-active-width: 280px;
    --sidebar-gap: 300px;
    --header-height: 100px;
    --header-height-scrolled: 60px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed {
    --sidebar-active-width: 0px;
    --sidebar-gap: 0px;
}

@media (max-width: 991px) {
    :root {
        --sidebar-active-width: 0px;
        --sidebar-gap: 0px;
    }
}