/* ==========================================================================
   OLY · Design Tokens
   --------------------------------------------------------------------------
   Sistema de variables CSS para color, espaciado, radio, sombras y tipografía.
   Toda la UI debe consumir estos tokens — NUNCA usar hex directos en vistas.
   Para cambiar la paleta, basta con tocar este archivo.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* ── Marca / acento ────────────────────────────────────────────────── */
    --oly-brand-primary:        #2563EB;
    --oly-brand-primary-hover:  #1D4ED8;
    --oly-brand-primary-active: #1E40AF;
    --oly-brand-primary-soft:   #EFF6FF;
    --oly-brand-primary-rgb:    37, 99, 235;

    --oly-brand-accent:         #3B82F6;
    --oly-brand-accent-soft:    #DBEAFE;

    /* ── Sidebar ───────────────────────────────────────────────────────── */
    --oly-sidebar-bg:               #FFFFFF;
    --oly-sidebar-border:           #E5E7EB;
    --oly-sidebar-item-text:        #4B5563;
    --oly-sidebar-item-hover-bg:    #F3F4F6;
    --oly-sidebar-item-active-bg:   var(--oly-brand-primary-soft);
    --oly-sidebar-item-active-text: var(--oly-brand-primary);
    --oly-sidebar-brand-text:       #111827;
    --oly-sidebar-group-label:      #6B7280;

    /* ── Header / Topbar ───────────────────────────────────────────────── */
    --oly-header-bg:        #FFFFFF;
    --oly-header-border:    #E5E7EB;
    --oly-header-text:      #111827;

    /* ── Surfaces (fondos) ─────────────────────────────────────────────── */
    --oly-bg:               #F9FAFB;
    --oly-surface:          #FFFFFF;
    --oly-surface-muted:    #F3F4F6;
    --oly-surface-raised:   #FFFFFF;

    /* ── Texto ─────────────────────────────────────────────────────────── */
    --oly-text-primary:     #111827;
    --oly-text-secondary:   #6B7280;
    --oly-text-tertiary:    #9CA3AF;
    --oly-text-on-brand:    #FFFFFF;
    --oly-text-link:        var(--oly-brand-primary);

    /* ── Bordes ────────────────────────────────────────────────────────── */
    --oly-border:           #E5E7EB;
    --oly-border-strong:    #D1D5DB;
    --oly-border-focus:     var(--oly-brand-primary);

    /* ── Estado ────────────────────────────────────────────────────────── */
    --oly-success:          #10B981;
    --oly-success-soft:     #D1FAE5;
    --oly-success-text:     #065F46;

    --oly-warning:          #F59E0B;
    --oly-warning-soft:     #FEF3C7;
    --oly-warning-text:     #92400E;

    --oly-danger:           #EF4444;
    --oly-danger-soft:      #FEE2E2;
    --oly-danger-text:      #991B1B;

    --oly-info:             #3B82F6;
    --oly-info-soft:        #DBEAFE;
    --oly-info-text:        #1E40AF;

    /* ── Espaciado (escala 4px) ────────────────────────────────────────── */
    --oly-space-1:  4px;
    --oly-space-2:  8px;
    --oly-space-3:  12px;
    --oly-space-4:  16px;
    --oly-space-5:  20px;
    --oly-space-6:  24px;
    --oly-space-8:  32px;
    --oly-space-10: 40px;
    --oly-space-12: 48px;

    /* ── Radio ─────────────────────────────────────────────────────────── */
    --oly-radius-sm:    6px;
    --oly-radius-md:    8px;
    --oly-radius-lg:    12px;
    --oly-radius-xl:    16px;
    --oly-radius-pill:  999px;

    /* ── Sombras ───────────────────────────────────────────────────────── */
    --oly-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --oly-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.06);
    --oly-shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
    --oly-shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.10), 0 4px 6px -4px rgba(16, 24, 40, 0.08);
    --oly-shadow-focus: 0 0 0 3px rgba(var(--oly-brand-primary-rgb), 0.18);

    /* ── Tipografía ────────────────────────────────────────────────────── */
    --oly-font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --oly-font-mono:  "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --oly-text-xs:   0.75rem;   /* 12px */
    --oly-text-sm:   0.875rem;  /* 14px */
    --oly-text-base: 1rem;      /* 16px */
    --oly-text-lg:   1.125rem;  /* 18px */
    --oly-text-xl:   1.25rem;   /* 20px */
    --oly-text-2xl:  1.5rem;    /* 24px */
    --oly-text-3xl:  1.875rem;  /* 30px */

    --oly-leading-tight:  1.25;
    --oly-leading-normal: 1.5;
    --oly-leading-relaxed: 1.75;

    --oly-fw-regular:  400;
    --oly-fw-medium:   500;
    --oly-fw-semibold: 600;
    --oly-fw-bold:     700;

    /* ── Layout dimensions ─────────────────────────────────────────────── */
    --oly-sidebar-width:           240px;
    --oly-sidebar-collapsed-width: 68px;
    --oly-header-height:           60px;

    /* ── Transitions ───────────────────────────────────────────────────── */
    --oly-transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --oly-transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --oly-transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Bridge a Bootstrap (sin reescribir Bootstrap) ─────────────────── */
    --bs-primary:               var(--oly-brand-primary);
    --bs-primary-rgb:           var(--oly-brand-primary-rgb);
    --bs-link-color:            var(--oly-brand-primary);
    --bs-link-hover-color:      var(--oly-brand-primary-hover);
    --bs-body-bg:               var(--oly-bg);
    --bs-body-color:            var(--oly-text-primary);
    --bs-body-font-family:      var(--oly-font-sans);
    --bs-border-color:          var(--oly-border);
    --bs-border-radius:         var(--oly-radius-md);
    --bs-border-radius-sm:      var(--oly-radius-sm);
    --bs-border-radius-lg:      var(--oly-radius-lg);
}

/* ============================================================================
   Dark mode — adaptado al rediseño
   ============================================================================ */
[data-bs-theme="dark"] {
    --oly-brand-primary:        #3B82F6;
    --oly-brand-primary-hover:  #60A5FA;
    --oly-brand-primary-active: #2563EB;
    --oly-brand-primary-soft:   rgba(59, 130, 246, 0.12);
    --oly-brand-primary-rgb:    59, 130, 246;

    --oly-brand-accent:         #60A5FA;
    --oly-brand-accent-soft:    rgba(96, 165, 250, 0.12);

    --oly-sidebar-bg:               #0F172A;
    --oly-sidebar-border:           #1E293B;
    --oly-sidebar-item-text:        #94A3B8;
    --oly-sidebar-item-hover-bg:    #1E293B;
    --oly-sidebar-item-active-bg:   rgba(59, 130, 246, 0.15);
    --oly-sidebar-item-active-text: #93C5FD;
    --oly-sidebar-brand-text:       #F1F5F9;
    --oly-sidebar-group-label:      #64748B;

    --oly-header-bg:        #0F172A;
    --oly-header-border:    #1E293B;
    --oly-header-text:      #F1F5F9;

    --oly-bg:               #020617;
    --oly-surface:          #0F172A;
    --oly-surface-muted:    #1E293B;
    --oly-surface-raised:   #1E293B;

    --oly-text-primary:     #F1F5F9;
    --oly-text-secondary:   #94A3B8;
    --oly-text-tertiary:    #64748B;
    --oly-text-on-brand:    #FFFFFF;
    --oly-text-link:        #93C5FD;

    --oly-border:           #1E293B;
    --oly-border-strong:    #334155;

    --oly-success-soft:     rgba(16, 185, 129, 0.15);
    --oly-success-text:     #6EE7B7;
    --oly-warning-soft:     rgba(245, 158, 11, 0.15);
    --oly-warning-text:     #FCD34D;
    --oly-danger-soft:      rgba(239, 68, 68, 0.15);
    --oly-danger-text:      #FCA5A5;
    --oly-info-soft:        rgba(59, 130, 246, 0.15);
    --oly-info-text:        #93C5FD;

    --oly-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --oly-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30);
    --oly-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
    --oly-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
}