/* =========================================================
   USER APP — DESIGN SYSTEM VARIABLES
   File: user_app/assets/css/variables.css
   ========================================================= */

:root {

    /* =====================================================
       BRAND
       ===================================================== */

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #1e40af;
    --color-primary-soft: #eff6ff;

    --color-secondary: #64748b;
    --color-secondary-hover: #475569;
    --color-secondary-soft: #f1f5f9;

    --color-accent: #06b6d4;
    --color-accent-hover: #0891b2;
    --color-accent-soft: #ecfeff;


    /* =====================================================
       SEMANTIC COLORS
       ===================================================== */

    --color-success: #16a34a;
    --color-success-hover: #15803d;
    --color-success-soft: #f0fdf4;

    --color-warning: #d97706;
    --color-warning-hover: #b45309;
    --color-warning-soft: #fffbeb;

    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-soft: #fef2f2;

    --color-info: #0284c7;
    --color-info-hover: #0369a1;
    --color-info-soft: #f0f9ff;


    /* =====================================================
       BACKGROUND
       ===================================================== */

    --color-background: #f8fafc;
    --color-background-secondary: #f1f5f9;
    --color-background-tertiary: #e2e8f0;

    --color-surface: #ffffff;
    --color-surface-hover: #f8fafc;
    --color-surface-active: #f1f5f9;

    --color-overlay: rgba(15, 23, 42, 0.55);


    /* =====================================================
       TEXT
       ===================================================== */

    --color-text: #0f172a;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-disabled: #cbd5e1;

    --color-text-inverse: #ffffff;

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);


    /* =====================================================
       BORDER
       ===================================================== */

    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-medium: #cbd5e1;
    --color-border-dark: #94a3b8;

    --color-focus: rgba(37, 99, 235, 0.22);


    /* =====================================================
       TYPOGRAPHY
       ===================================================== */

    --font-family-base:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-heading: var(--font-family-base);

    --font-family-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;


    /* Font sizes */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 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;


    /* Line heights */

    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 1.8;


    /* Font weights */

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


    /* =====================================================
       SPACING SYSTEM
       ===================================================== */

    --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-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;


    /* =====================================================
       BORDER RADIUS
       ===================================================== */

    --radius-none: 0;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;


    /* =====================================================
       SHADOWS
       ===================================================== */

    --shadow-none: none;

    --shadow-xs:
        0 1px 2px rgba(15, 23, 42, 0.04);

    --shadow-sm:
        0 1px 3px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.04);

    --shadow-md:
        0 4px 10px rgba(15, 23, 42, 0.08),
        0 2px 4px rgba(15, 23, 42, 0.04);

    --shadow-lg:
        0 10px 25px rgba(15, 23, 42, 0.10),
        0 4px 10px rgba(15, 23, 42, 0.05);

    --shadow-xl:
        0 20px 40px rgba(15, 23, 42, 0.12),
        0 8px 16px rgba(15, 23, 42, 0.06);

    --shadow-2xl:
        0 25px 60px rgba(15, 23, 42, 0.16);


    /* =====================================================
       FOCUS / ACCESSIBILITY
       ===================================================== */

    --focus-ring:
        0 0 0 3px var(--color-focus);


    /* =====================================================
       TRANSITIONS
       ===================================================== */

    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    --transition-all:
        all var(--transition-base);


    /* =====================================================
       LAYOUT
       ===================================================== */

    --container-xs: 480px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;

    --content-max-width: 1400px;

    --page-padding-x: 1.5rem;
    --page-padding-y: 1.5rem;


    /* =====================================================
       HEADER
       ===================================================== */

    --header-height: 64px;
    --header-height-mobile: 60px;

    --header-background: var(--color-surface);
    --header-border: var(--color-border);


    /* =====================================================
       SIDEBAR
       ===================================================== */

    --sidebar-width: 260px;
    --sidebar-width-collapsed: 76px;

    --sidebar-background: #ffffff;
    --sidebar-border: var(--color-border);

    --sidebar-item-height: 44px;

    --sidebar-item-radius: var(--radius-md);

    --sidebar-item-color: var(--color-text-secondary);
    --sidebar-item-hover: var(--color-primary-soft);
    --sidebar-item-active: var(--color-primary);
    --sidebar-item-active-text: #ffffff;


    /* =====================================================
       MOBILE NAVIGATION
       ===================================================== */

    --mobile-nav-height: 64px;


    /* =====================================================
       CARDS
       ===================================================== */

    --card-background: var(--color-surface);
    --card-border: var(--color-border);
    --card-radius: var(--radius-xl);

    --card-padding: var(--space-6);

    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);


    /* =====================================================
       FORMS
       ===================================================== */

    --input-height: 44px;
    --input-height-sm: 38px;
    --input-height-lg: 50px;

    --input-padding-x: 0.875rem;

    --input-background: var(--color-surface);
    --input-border: var(--color-border-medium);

    --input-radius: var(--radius-md);

    --input-text: var(--color-text-primary);
    --input-placeholder: var(--color-text-muted);

    --input-focus-border: var(--color-primary);


    /* =====================================================
       BUTTONS
       ===================================================== */

    --button-height: 42px;
    --button-height-sm: 36px;
    --button-height-lg: 48px;

    --button-padding-x: 1rem;

    --button-radius: var(--radius-md);

    --button-font-weight: var(--font-weight-semibold);


    /* =====================================================
       TABLES
       ===================================================== */

    --table-header-background: #f8fafc;
    --table-row-hover: #f8fafc;
    --table-border: var(--color-border);

    --table-cell-padding-x: 1rem;
    --table-cell-padding-y: 0.875rem;


    /* =====================================================
       MODALS
       ===================================================== */

    --modal-width-sm: 400px;
    --modal-width-md: 560px;
    --modal-width-lg: 760px;
    --modal-width-xl: 1000px;

    --modal-background: var(--color-surface);
    --modal-radius: var(--radius-xl);
    --modal-shadow: var(--shadow-2xl);


    /* =====================================================
       STATUS / BADGES
       ===================================================== */

    --badge-radius: var(--radius-full);

    --badge-font-size: var(--font-size-xs);
    --badge-font-weight: var(--font-weight-semibold);


    /* =====================================================
       Z-INDEX SYSTEM
       ===================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-sidebar: 400;
    --z-overlay: 500;
    --z-modal: 600;
    --z-popover: 700;
    --z-tooltip: 800;
    --z-toast: 900;


    /* =====================================================
       AVATARS
       ===================================================== */

    --avatar-xs: 28px;
    --avatar-sm: 36px;
    --avatar-md: 44px;
    --avatar-lg: 56px;
    --avatar-xl: 72px;
    --avatar-2xl: 96px;


    /* =====================================================
       ICONS
       ===================================================== */

    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;


    /* =====================================================
       BREAKPOINTS
       ===================================================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;


    /* =====================================================
       MOTION
       ===================================================== */

    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);


    /* =====================================================
       COMPONENT STATES
       ===================================================== */

    --state-hover-opacity: 0.92;
    --state-disabled-opacity: 0.55;

}


/* =========================================================
   DARK THEME
   ========================================================= */

[data-theme="dark"] {

    --color-background: #0f172a;
    --color-background-secondary: #111827;
    --color-background-tertiary: #1e293b;

    --color-surface: #111827;
    --color-surface-hover: #1e293b;
    --color-surface-active: #334155;

    --color-text: #f8fafc;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-disabled: #475569;

    --color-border: #1e293b;
    --color-border-light: #172033;
    --color-border-medium: #334155;
    --color-border-dark: #475569;

    --color-primary-soft: rgba(37, 99, 235, 0.14);

    --color-secondary-soft: rgba(100, 116, 139, 0.14);

    --color-success-soft: rgba(22, 163, 74, 0.14);
    --color-warning-soft: rgba(217, 119, 6, 0.14);
    --color-danger-soft: rgba(220, 38, 38, 0.14);
    --color-info-soft: rgba(2, 132, 199, 0.14);

    --header-background: #111827;
    --sidebar-background: #111827;

    --table-header-background: #172033;
    --table-row-hover: #172033;

    --input-background: #0f172a;

    --shadow-sm:
        0 1px 3px rgba(0, 0, 0, 0.30);

    --shadow-md:
        0 4px 12px rgba(0, 0, 0, 0.30);

    --shadow-lg:
        0 10px 30px rgba(0, 0, 0, 0.35);

    --shadow-xl:
        0 20px 45px rgba(0, 0, 0, 0.40);

    --shadow-2xl:
        0 25px 70px rgba(0, 0, 0, 0.50);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}