/**
 * IOmed Centro Médico Dayenu - Design Tokens v2
 * Foundation layer: CSS custom properties for the entire design system.
 * Dark mode is handled via variable overrides in body.dark-mode.
 *
 * Usage: var(--bg-card), var(--text-primary), etc.
 * All component CSS should reference these tokens instead of hardcoded colors.
 */

/* ===========================================
   LIGHT MODE (Default)
   =========================================== */
:root {
    /* --- Brand Colors (constant, never change with mode) --- */
    --color-primary:        #0891B2;
    --color-primary-hover:  #0E7490;
    --color-primary-light:  #06B6D4;
    --color-primary-soft:   rgba(8, 145, 178, 0.08);
    --color-primary-muted:  rgba(8, 145, 178, 0.12);
    --color-gradient:       linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);

    --color-accent:         #10B981;
    --color-accent-light:   #34D399;
    --color-gradient-accent: linear-gradient(135deg, #10B981 0%, #34D399 100%);

    /* --- Semantic / Status Colors --- */
    --color-success:        #10B981;
    --color-success-hover:  #059669;
    --color-success-soft:   rgba(16, 185, 129, 0.10);
    --color-success-shadow: rgba(16, 185, 129, 0.30);
    --gradient-success:     linear-gradient(135deg, #10B981 0%, #059669 100%);

    --color-danger:         #EF4444;
    --color-danger-hover:   #DC2626;
    --color-danger-soft:    rgba(239, 68, 68, 0.10);
    --color-danger-shadow:  rgba(239, 68, 68, 0.30);
    --gradient-danger:      linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    --color-warning:        #F59E0B;
    --color-warning-hover:  #D97706;
    --color-warning-soft:   rgba(245, 158, 11, 0.10);
    --color-warning-shadow: rgba(245, 158, 11, 0.30);
    --gradient-warning:     linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

    --color-info:           #3B82F6;
    --color-info-hover:     #2563EB;
    --color-info-soft:      rgba(59, 130, 246, 0.10);
    --color-info-shadow:    rgba(59, 130, 246, 0.30);
    --gradient-info:        linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);

    /* --- Backgrounds (change with dark mode) --- */
    --bg-body:              #F9FAFB;
    --bg-page:              #F8FAFC;
    --bg-card:              #FFFFFF;
    --bg-card-hover:        #FFFFFF;
    --bg-input:             #FFFFFF;
    --bg-input-focus:       #FFFFFF;
    --bg-hover:             #F3F4F6;
    --bg-subtle:            #F1F5F9;
    --bg-white:             #FFFFFF;
    --bg-light:             #F1F5F9;

    /* --- Text Colors --- */
    --text-heading:         #111827;
    --text-primary:         #1E293B;
    --text-secondary:       #6B7280;
    --text-muted:           #9CA3AF;
    --text-placeholder:     #94A3B8;
    --text-on-primary:      #FFFFFF;
    --text-link:            #0891B2;
    --text-link-hover:      #0E7490;

    /* --- Borders --- */
    --border-color:         #E5E7EB;
    --border-light:         #F3F4F6;
    --border-input:         #D1D5DB;
    --border-focus:         #0891B2;
    --border-transparent:   rgba(0, 0, 0, 0.05);

    /* --- Shadows --- */
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:            0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-card-hover:    0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:            0 8px 20px -4px rgba(0, 0, 0, 0.08);
    --shadow-xl:            0 16px 40px -8px rgba(0, 0, 0, 0.12);
    --shadow-header:        none;
    --shadow-dropdown:      0 4px 24px rgba(0, 0, 0, 0.12);
    --shadow-modal:         0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-primary:       none;
    --shadow-primary-hover: none;

    /* --- Badge (dot-style) --- */
    --badge-success-bg:     #ECFDF5;
    --badge-success-text:   #065F46;
    --badge-danger-bg:      #FEF2F2;
    --badge-danger-text:    #991B1B;
    --badge-warning-bg:     #FFFBEB;
    --badge-warning-text:   #92400E;
    --badge-info-bg:        #EFF6FF;
    --badge-info-text:      #1E40AF;
    --badge-primary-bg:     #ECFEFF;
    --badge-primary-text:   #155E75;
    --badge-neutral-bg:     #F3F4F6;
    --badge-neutral-text:   #374151;

    /* --- Alert (left-border style) --- */
    --alert-border-width:   3px;

    /* --- Header --- */
    --header-bg:            #FFFFFF;
    --header-border:        #E5E7EB;
    --header-nav-color:     #6B7280;
    --header-nav-hover:     #111827;
    --header-height:        64px;

    /* --- Sidebar (white/light design) --- */
    --sidebar-bg:           #FFFFFF;
    --sidebar-shadow:       none;
    --sidebar-border:       #E5E7EB;
    --sidebar-width:        260px;
    --sidebar-width-collapsed: 68px;
    --sidebar-text:         #374151;
    --sidebar-text-hover:   #111827;
    --sidebar-hover-bg:     #F3F4F6;
    --sidebar-active-bg:    #ECFEFF;
    --sidebar-active-text:  #0891B2;
    --sidebar-active-border: #0891B2;
    --sidebar-active-shadow: none;
    --sidebar-search-bg:    #F9FAFB;
    --sidebar-search-border: #E5E7EB;
    --sidebar-search-text:  #111827;
    --sidebar-search-placeholder: #9CA3AF;
    --sidebar-section-color: #9CA3AF;
    --sidebar-icon-color:   #6B7280;
    --sidebar-icon-active:  #0891B2;
    --sidebar-btn-bg:       #F3F4F6;
    --sidebar-btn-color:    #374151;
    --sidebar-logo-border:  #F3F4F6;

    /* --- Content Area --- */
    --content-bg:           #F8FAFC;

    /* --- Table --- */
    --table-header-bg:      #F9FAFB;
    --table-header-color:   #64748B;
    --table-row-hover:      rgba(8, 145, 178, 0.04);
    --table-border:         rgba(0, 0, 0, 0.04);
    --table-text:           #1E293B;

    /* --- Form --- */
    --form-label-color:     #1E293B;
    --form-required-color:  #EF4444;

    /* --- Modal --- */
    --modal-bg:             #FFFFFF;
    --modal-border:         rgba(0, 0, 0, 0.06);
    --modal-overlay:        rgba(0, 0, 0, 0.40);

    /* --- Dropdown --- */
    --dropdown-bg:          #FFFFFF;
    --dropdown-hover-bg:    #F1F5F9;
    --dropdown-text:        #1E293B;
    --dropdown-hover-text:  #0891B2;

    /* --- Pagination --- */
    --page-link-bg:         transparent;
    --page-link-color:      #64748B;
    --page-link-hover-bg:   #F1F5F9;

    /* --- Scrollbar --- */
    --scrollbar-track:      #F1F5F9;
    --scrollbar-thumb:      #CBD5E1;
    --scrollbar-thumb-hover: #94A3B8;

    /* --- Select2 --- */
    --select2-bg:           #FAFBFC;
    --select2-border:       #D1D5DB;
    --select2-text:         #1E293B;
    --select2-dropdown-bg:  #FFFFFF;

    /* --- Widget / Stats --- */
    --widget-bg:            #FFFFFF;
    --widget-value-color:   #1E293B;
    --widget-label-color:   #64748B;
    --widget-icon-primary-bg:  rgba(8, 145, 178, 0.12);
    --widget-icon-success-bg:  rgba(16, 185, 129, 0.12);
    --widget-icon-danger-bg:   rgba(239, 68, 68, 0.12);
    --widget-icon-warning-bg:  rgba(245, 158, 11, 0.12);
    --widget-icon-info-bg:     rgba(59, 130, 246, 0.12);

    /* --- Focus / Interaction --- */
    --focus-ring:              rgba(8, 145, 178, 0.1);
    --focus-ring-danger:       rgba(239, 68, 68, 0.1);
    --page-loader-bg:          rgba(255, 255, 255, 0.85);

    /* --- Misc --- */
    --chart-bg:             #FFFFFF;
    --list-group-bg:        #FFFFFF;
    --list-group-border:    #E5E7EB;
    --breadcrumb-color:     #94A3B8;
    --breadcrumb-active:    #6B7280;

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

    /* --- Spacing Scale (4px base) --- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* --- Border Radius --- */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* --- Transitions --- */
    --transition-fast:    150ms ease;
    --transition-normal:  250ms ease;
    --transition-smooth:  300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:    350ms ease;

    /* --- Breakpoints (reference only, can't use in @media) --- */
    /* --bp-mobile:   576px   Phones */
    /* --bp-tablet:   768px   Tablets portrait */
    /* --bp-desktop:  1024px  Tablets landscape, laptops */
    /* --bp-wide:     1200px  Standard monitors (Bootstrap xl) */
    /* --bp-ultra:    1536px  Large monitors */
}


/* ===========================================
   DARK MODE OVERRIDES
   Only semantic/contextual variables change.
   Brand colors (--color-primary, etc.) stay the same.
   =========================================== */
body.dark-mode {
    /* --- Backgrounds --- */
    --bg-body:              #13151F;
    --bg-page:              #1A1D26;
    --bg-card:              #1E222D;
    --bg-card-hover:        #252A36;
    --bg-input:             #252A36;
    --bg-input-focus:       #2D3341;
    --bg-hover:             #252A36;
    --bg-subtle:            #252A36;
    --bg-white:             #1E222D;
    --bg-light:             #252A36;

    /* --- Text Colors --- */
    --text-heading:         #E2E8F0;
    --text-primary:         #E2E8F0;
    --text-secondary:       #CBD5E1;
    --text-muted:           #94A3B8;
    --text-placeholder:     #64748B;
    --text-link:            #06B6D4;
    --text-link-hover:      #22D3EE;

    /* --- Borders --- */
    --border-color:         rgba(255, 255, 255, 0.08);
    --border-light:         rgba(255, 255, 255, 0.05);
    --border-input:         #3B4252;
    --border-transparent:   rgba(255, 255, 255, 0.08);

    /* --- Shadows (darker in dark mode) --- */
    --shadow-card:          0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-card-hover:    0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-dropdown:      0 4px 24px rgba(0, 0, 0, 0.40);
    --shadow-modal:         0 16px 48px rgba(0, 0, 0, 0.50);

    /* --- Badge (dark mode) --- */
    --badge-success-bg:     rgba(16, 185, 129, 0.15);
    --badge-success-text:   #6EE7B7;
    --badge-danger-bg:      rgba(239, 68, 68, 0.15);
    --badge-danger-text:    #FCA5A5;
    --badge-warning-bg:     rgba(245, 158, 11, 0.15);
    --badge-warning-text:   #FCD34D;
    --badge-info-bg:        rgba(59, 130, 246, 0.15);
    --badge-info-text:      #93C5FD;
    --badge-primary-bg:     rgba(8, 145, 178, 0.15);
    --badge-primary-text:   #67E8F9;
    --badge-neutral-bg:     rgba(255, 255, 255, 0.08);
    --badge-neutral-text:   #D1D5DB;

    /* --- Semantic status soft backgrounds (slightly brighter in dark) --- */
    --color-success-soft:   rgba(16, 185, 129, 0.15);
    --color-danger-soft:    rgba(239, 68, 68, 0.15);
    --color-warning-soft:   rgba(245, 158, 11, 0.15);
    --color-info-soft:      rgba(59, 130, 246, 0.15);
    --color-primary-soft:   rgba(8, 145, 178, 0.15);

    /* --- Header --- */
    --header-bg:            #1E222D;
    --header-border:        rgba(255, 255, 255, 0.08);
    --header-nav-color:     #94A3B8;
    --header-nav-hover:     #E2E8F0;

    /* --- Sidebar --- */
    --sidebar-bg:           #1E293B;
    --sidebar-border:       #334155;
    --sidebar-text:         #CBD5E1;
    --sidebar-text-hover:   #F1F5F9;
    --sidebar-hover-bg:     rgba(255, 255, 255, 0.05);
    --sidebar-active-bg:    rgba(8, 145, 178, 0.15);
    --sidebar-active-text:  #67E8F9;
    --sidebar-active-border: #06B6D4;
    --sidebar-search-bg:    rgba(255, 255, 255, 0.05);
    --sidebar-search-border: #334155;
    --sidebar-search-text:  #E2E8F0;
    --sidebar-search-placeholder: #64748B;
    --sidebar-section-color: #64748B;
    --sidebar-icon-color:   #94A3B8;
    --sidebar-icon-active:  #67E8F9;
    --sidebar-btn-bg:       rgba(255, 255, 255, 0.08);
    --sidebar-btn-color:    #CBD5E1;
    --sidebar-logo-border:  #334155;

    /* --- Content --- */
    --content-bg:           #1A1D26;

    /* --- Table --- */
    --table-header-bg:      #252A36;
    --table-header-color:   #94A3B8;
    --table-row-hover:      rgba(8, 145, 178, 0.08);
    --table-border:         rgba(255, 255, 255, 0.05);
    --table-text:           #CBD5E1;

    /* --- Form --- */
    --form-label-color:     #CBD5E1;

    /* --- Modal --- */
    --modal-bg:             #1E222D;
    --modal-border:         rgba(255, 255, 255, 0.08);

    /* --- Dropdown --- */
    --dropdown-bg:          #1E222D;
    --dropdown-hover-bg:    #252A36;
    --dropdown-text:        #CBD5E1;
    --dropdown-hover-text:  #06B6D4;

    /* --- Pagination --- */
    --page-link-bg:         #1E222D;
    --page-link-color:      #CBD5E1;
    --page-link-hover-bg:   #252A36;

    /* --- Scrollbar --- */
    --scrollbar-track:      #1A1D26;
    --scrollbar-thumb:      #3B4252;
    --scrollbar-thumb-hover: #4B5563;

    /* --- Select2 --- */
    --select2-bg:           #252A36;
    --select2-border:       #3B4252;
    --select2-text:         #E2E8F0;
    --select2-dropdown-bg:  #1E222D;

    /* --- Widget / Stats --- */
    --widget-bg:            #1E222D;
    --widget-value-color:   #E2E8F0;
    --widget-label-color:   #94A3B8;
    --widget-icon-primary-bg: rgba(8, 145, 178, 0.15);
    --widget-icon-success-bg: rgba(16, 185, 129, 0.15);
    --widget-icon-danger-bg:  rgba(239, 68, 68, 0.15);
    --widget-icon-warning-bg: rgba(245, 158, 11, 0.15);
    --widget-icon-info-bg:    rgba(59, 130, 246, 0.15);

    /* --- Focus / Interaction --- */
    --focus-ring:           rgba(8, 145, 178, 0.15);
    --focus-ring-danger:    rgba(239, 68, 68, 0.15);
    --page-loader-bg:       rgba(19, 21, 31, 0.85);

    /* --- Gradient (dark variant for welcome card etc.) --- */
    --color-gradient:       linear-gradient(135deg, #1E3A5F 0%, #0D2137 100%);

    /* --- Misc --- */
    --chart-bg:             #1E222D;
    --list-group-bg:        #1E222D;
    --list-group-border:    rgba(255, 255, 255, 0.08);
    --breadcrumb-color:     #94A3B8;
    --breadcrumb-active:    #CBD5E1;
}

/* ===========================================
   GLOBAL FONT FAMILY APPLICATION
   =========================================== */
body,
.aside-menu-container,
.header,
.content,
.modal,
input, textarea, select, button,
.form-control, .form-select,
.btn,
.nav-link,
.dropdown-item,
.badge,
.alert,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family) !important;
}

/* ===========================================
   REDUCED MOTION SUPPORT
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}