/**
 * My Clinic History - Design Tokens & 7 Temas Oficiales
 * Soporte de herencia de temas y sobrescritura médica en tiempo real
 */

:root {
    /* Tipografía y tamaños globales heredables */
    --app-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --app-font-size-base: 14px;
    --app-radius-sm: 6px;
    --app-radius-md: 10px;
    --app-radius-lg: 14px;
    --app-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --app-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Medidas de layout */
    --sidebar-width-expanded: 260px;
    --sidebar-width-collapsed: 68px;
    --tabs-height: 44px;
    --topbar-height: 56px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);

    /* Z-Index Layering */
    --z-sidebar: 100;
    --z-topbar: 90;
    --z-tabs: 80;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-toast: 1100;
}

/* =============================================================================
   CATÁLOGO DE LOS 7 TEMAS PREDISEÑADOS
   ============================================================================= */

/* 1. Clinical Clean (Predeterminado - Blanco clínico con azul profesional) */
[data-theme="clinical-clean"] {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-sidebar-hover: #f1f5f9;
    --bg-sidebar-active: #e0f2fe;
    --border-color: #e2e8f0;
    --border-focus: #0284c7;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-light: #e0f2fe;
    --primary-contrast: #ffffff;

    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
}

/* 2. Dark Medical (Modo oscuro de alto contraste y descanso visual) */
[data-theme="dark-medical"] {
    --bg-body: #0b1120;
    --bg-surface: #0f172a;
    --bg-sidebar: #0f172a;
    --bg-sidebar-hover: #1e293b;
    --bg-sidebar-active: #1e3a5f;
    --border-color: #1e293b;
    --border-focus: #38bdf8;

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;

    --primary: #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-light: rgba(56, 189, 248, 0.15);
    --primary-contrast: #0b1120;

    --success: #34d399;
    --success-light: rgba(52, 211, 153, 0.15);
    --warning: #fbbf24;
    --warning-light: rgba(251, 191, 36, 0.15);
    --danger: #f87171;
    --danger-light: rgba(248, 113, 113, 0.15);
    --info: #60a5fa;
    --info-light: rgba(96, 165, 250, 0.15);
}

/* 3. Nordic Teal (Verde azulado nórdico y calma clínica) */
[data-theme="nordic-teal"] {
    --bg-body: #f0fdfa;
    --bg-surface: #ffffff;
    --bg-sidebar: #134e4a;
    --bg-sidebar-hover: #115e59;
    --bg-sidebar-active: #0f766e;
    --border-color: #ccfbf1;
    --border-focus: #0d9488;

    --text-primary: #134e4a;
    --text-secondary: #2dd4bf;
    --text-muted: #99f6e4;
    --text-inverse: #ffffff;

    --primary: #0d9488;
    --primary-hover: #0f766e;
    --primary-light: #ccfbf1;
    --primary-contrast: #ffffff;

    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #0284c7;
    --info-light: #e0f2fe;
}

/* 4. Royal Navy (Azul marino majestuoso e institucional) */
[data-theme="royal-navy"] {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --bg-sidebar: #1e3a8a;
    --bg-sidebar-hover: #1d4ed8;
    --bg-sidebar-active: #2563eb;
    --border-color: #e2e8f0;
    --border-focus: #1d4ed8;

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --primary: #1e3a8a;
    --primary-hover: #1e40af;
    --primary-light: #dbeafe;
    --primary-contrast: #ffffff;

    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --info: #2563eb;
    --info-light: #dbeafe;
}

/* 5. Warm Care (Tonos cálidos y reconfortantes de atención médica) */
[data-theme="warm-care"] {
    --bg-body: #fffbeb;
    --bg-surface: #ffffff;
    --bg-sidebar: #78350f;
    --bg-sidebar-hover: #92400e;
    --bg-sidebar-active: #b45309;
    --border-color: #fef3c7;
    --border-focus: #d97706;

    --text-primary: #451a03;
    --text-secondary: #78350f;
    --text-muted: #b45309;
    --text-inverse: #ffffff;

    --primary: #d97706;
    --primary-hover: #b45309;
    --primary-light: #fef3c7;
    --primary-contrast: #ffffff;

    --success: #15803d;
    --success-light: #dcfce7;
    --warning: #ea580c;
    --warning-light: #ffedd5;
    --danger: #b91c1c;
    --danger-light: #fee2e2;
    --info: #0284c7;
    --info-light: #e0f2fe;
}

/* 6. Emerald Health (Salud, frescura y vitalidad verde) */
[data-theme="emerald-health"] {
    --bg-body: #f0fdf4;
    --bg-surface: #ffffff;
    --bg-sidebar: #064e3b;
    --bg-sidebar-hover: #065f46;
    --bg-sidebar-active: #047857;
    --border-color: #dcfce7;
    --border-focus: #059669;

    --text-primary: #064e3b;
    --text-secondary: #047857;
    --text-muted: #6ee7b7;
    --text-inverse: #ffffff;

    --primary: #059669;
    --primary-hover: #047857;
    --primary-light: #d1fae5;
    --primary-contrast: #ffffff;

    --success: #16a34a;
    --success-light: #dcfce7;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --info: #0891b2;
    --info-light: #cffafe;
}

/* 7. Soft Slate (Minimalismo contemporáneo en grises sobrios) */
[data-theme="soft-slate"] {
    --bg-body: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-sidebar: #334155;
    --bg-sidebar-hover: #475569;
    --bg-sidebar-active: #64748b;
    --border-color: #e2e8f0;
    --border-focus: #475569;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --primary: #475569;
    --primary-hover: #334155;
    --primary-light: #f1f5f9;
    --primary-contrast: #ffffff;

    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;
}