/* ========================================
   NoveRest Design System - Variables CSS
   ======================================== */

:root {
    /* === Color Primario === */
    --primary: #F54927;
    --primary-hover: #E03D1C;
    --primary-active: #C73518;
    --primary-light: #FF6B4A;
    --primary-lighter: #FFE8E4;
    --primary-rgb: 245, 73, 39;

    /* === Colores Semanticos === */
    --success: #198754;
    --success-hover: #157347;
    --success-light: #d1e7dd;

    --danger: #dc3545;
    --danger-hover: #bb2d3b;
    --danger-light: #f8d7da;

    --warning: #ffc107;
    --warning-hover: #ffca2c;
    --warning-light: #fff3cd;

    --info: #0dcaf0;
    --info-hover: #31d2f2;
    --info-light: #cff4fc;

    /* === Escala de Grises === */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* === Tema Light (Default) === */
    --bg-body: #f4f6f9;
    --bg-surface: #ffffff;
    --bg-surface-secondary: #f8f9fa;
    --bg-surface-elevated: #ffffff;

    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-inverse: #ffffff;

    --border-color: #dee2e6;
    --border-color-light: #e9ecef;

    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.125);

    /* === Sidebar === */
    --sidebar-bg: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    --sidebar-text: #e4e4e4;
    --sidebar-text-muted: #a0a0a0;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-active-bg: rgba(245, 73, 39, 0.2);
    --sidebar-active-border: var(--primary);

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

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

    /* === Tipografia === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --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-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === Transiciones === */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

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

    /* === Componentes === */
    --input-bg: var(--bg-surface);
    --input-border: var(--border-color);
    --input-focus-border: var(--primary);
    --input-focus-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);

    --card-bg: var(--bg-surface);
    --card-border: var(--border-color);

    --table-header-bg: var(--gray-100);
    --table-row-hover: rgba(var(--primary-rgb), 0.04);
    --table-row-disabled: var(--gray-100);

    /* === Estados de Validacion === */
    --valid-color: var(--success);
    --invalid-color: var(--danger);
}

/* ========================================
   Tema Dark
   ======================================== */
[data-theme="dark"] {
    /* === Fondos === */
    --bg-body: #0f0f1a;
    --bg-surface: #1a1a2e;
    --bg-surface-secondary: #16213e;
    --bg-surface-elevated: #252542;

    /* === Texto === */
    --text-primary: #e4e4e4;
    --text-secondary: #a0a0a0;
    --text-muted: #6c757d;

    /* === Bordes === */
    --border-color: #2d2d44;
    --border-color-light: #3d3d5c;

    /* === Sombras (mas sutiles en dark) === */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.4);

    /* === Sidebar === */
    --sidebar-bg: linear-gradient(180deg, #0a0a14 0%, #0f0f1a 100%);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

    /* === Componentes === */
    --input-bg: var(--bg-surface-secondary);
    --card-bg: var(--bg-surface);

    --table-header-bg: var(--bg-surface-secondary);
    --table-row-hover: rgba(var(--primary-rgb), 0.08);
    --table-row-disabled: var(--bg-surface-secondary);

    /* === Colores semanticos ajustados para dark === */
    --success-light: rgba(25, 135, 84, 0.2);
    --danger-light: rgba(220, 53, 69, 0.2);
    --warning-light: rgba(255, 193, 7, 0.2);
    --info-light: rgba(13, 202, 240, 0.2);

    /* === Ajustes de grises === */
    --gray-50: #252542;
    --gray-100: #2d2d44;
    --gray-200: #3d3d5c;
}

/* ========================================
   Transicion suave entre temas
   ======================================== */
html {
    transition: background-color var(--transition-slow),
                color var(--transition-slow);
}

html,
body,
.page,
.sidebar,
.main,
.top-row,
.card,
.table,
.form-control,
.form-select,
.btn,
.alert,
.modal-content,
.dropdown-menu {
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal),
                box-shadow var(--transition-normal);
}