/* =========================================================================
   Design tokens — Bajo Belgrano
   --------------------------------------------------------------------------
   Única fuente de verdad de colores, tipografía, espaciado y sombras: si un
   valor visual aparece más de una vez, vive acá. Si un color no está en este
   archivo, no se usa.

   La paleta sale del logo: negro, un anillo naranja y la pelota blanca. El
   naranja es **acento** (botón primario, estado activo, dato destacado), nunca
   fondo. El tema por defecto es el oscuro; el claro es la excepción.

   Estructura:
   - :root                      → tokens neutros y paleta oscura (default)
   - :root[data-theme="light"]  → tema claro
   - :root[data-theme="dark"]   → explícito, mismos valores que :root

   Ver docs/UI_DESIGN.md para la especificación completa.
   ========================================================================= */

:root {
    /* ---------- Tipografía ---------- */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-loose: 1.75;

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

    /* ---------- Espaciado (sistema de 4) ---------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    /* Los dos últimos son para el sitio público: el ERP nunca separa tanto. */
    --space-20: 80px;
    --space-24: 96px;

    /* ---------- Border radius ---------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;   /* botones */
    --radius-xl: 12px;  /* cards */
    --radius-pill: 999px;

    /* ---------- Layout ---------- */
    --navbar-height: 60px;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 56px;
    --content-padding: 24px;

    /* ---------- Z-index layers ---------- */
    --z-content: 1;
    --z-dropdown: 1000;
    --z-sidebar: 1010;
    --z-navbar: 1020;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1100;

    /* ---------- Animación ---------- */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 200ms ease;
}

/* ===================== OSCURO (tema por defecto) ==================== */
:root {
    /* Superficies */
    --bg-page:        #0B0B0D;
    --bg-surface:     #151518;
    --bg-elevated:    #1C1C21;
    --bg-hover:       #1F1F25;
    --bg-active:      #26262E;

    /* Texto */
    --text-primary:   #F4F4F5;
    --text-secondary: #C4C4CB;
    --text-muted:     #9A9AA2;
    --text-inverse:   #0B0B0D;

    /* Bordes */
    --border-subtle:  #1F1F25;
    --border-default: #2A2A30;
    --border-strong:  #3A3A42;

    /* Acento: el naranja del logo */
    --accent:         #E8622A;
    --accent-hover:   #F07A45;
    --accent-active:  #C74E1F;
    --accent-soft:    rgba(232, 98, 42, .14);
    /* Naranja legible para texto chico sobre fondo oscuro: el pleno no llega
       a 4.5:1 en 13px. */
    --accent-text-color: #FFB08A;
    --accent-text:    #0B0B0D;
    /* Bootstrap 5.3 arma .text-primary y .bg-primary con
       rgba(var(--bs-primary-rgb), ...), así que necesita el color sin #. */
    --accent-rgb:     232, 98, 42;

    /* Estados. Siempre acompañados de texto o ícono: nunca sólo color. */
    --success:        #3FAE6A;
    --success-soft:   rgba(63, 174, 106, .16);
    --warning:        #D6A531;
    --warning-soft:   rgba(214, 165, 49, .16);
    --danger:         #D9534F;
    --danger-soft:    rgba(217, 83, 79, .16);
    --info:           #5B8DEF;
    --info-soft:      rgba(91, 141, 239, .16);

    /* Sombras: sólo en modales y dropdowns. Las cards se separan por borde. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    --backdrop: rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}

/* ============================== CLARO ============================== */
:root[data-theme="light"] {
    /* Superficies */
    --bg-page:        #F6F6F7;
    --bg-surface:     #FFFFFF;
    --bg-elevated:    #FFFFFF;
    --bg-hover:       #F0F0F2;
    --bg-active:      #E7E7EA;

    /* Texto */
    --text-primary:   #141416;
    --text-secondary: #3A3A42;
    --text-muted:     #6B6B75;
    --text-inverse:   #FFFFFF;

    /* Bordes */
    --border-subtle:  #ECECEF;
    --border-default: #E2E2E6;
    --border-strong:  #C9C9D0;

    /* Acento */
    --accent:         #E8622A;
    --accent-hover:   #D2551F;
    --accent-active:  #B84718;
    --accent-soft:    rgba(232, 98, 42, .12);
    --accent-text-color: #C24E1C;
    --accent-text:    #FFFFFF;
    --accent-rgb:     232, 98, 42;

    /* Estados */
    --success:        #14804A;
    --success-soft:   rgba(20, 128, 74, .12);
    --warning:        #9A6C0A;
    --warning-soft:   rgba(154, 108, 10, .12);
    --danger:         #B3312D;
    --danger-soft:    rgba(179, 49, 45, .12);
    --info:           #2A5FBF;
    --info-soft:      rgba(42, 95, 191, .12);

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    --backdrop: rgba(0, 0, 0, 0.4);

    color-scheme: light;
}

/* Explícito, para que el toggle gane en los dos sentidos. */
:root[data-theme="dark"] {
    /* Superficies */
    --bg-page:        #0B0B0D;
    --bg-surface:     #151518;
    --bg-elevated:    #1C1C21;
    --bg-hover:       #1F1F25;
    --bg-active:      #26262E;

    /* Texto */
    --text-primary:   #F4F4F5;
    --text-secondary: #C4C4CB;
    --text-muted:     #9A9AA2;
    --text-inverse:   #0B0B0D;

    /* Bordes */
    --border-subtle:  #1F1F25;
    --border-default: #2A2A30;
    --border-strong:  #3A3A42;

    /* Acento: el naranja del logo */
    --accent:         #E8622A;
    --accent-hover:   #F07A45;
    --accent-active:  #C74E1F;
    --accent-soft:    rgba(232, 98, 42, .14);
    /* Naranja legible para texto chico sobre fondo oscuro: el pleno no llega
       a 4.5:1 en 13px. */
    --accent-text-color: #FFB08A;
    --accent-text:    #0B0B0D;
    /* Bootstrap 5.3 arma .text-primary y .bg-primary con
       rgba(var(--bs-primary-rgb), ...), así que necesita el color sin #. */
    --accent-rgb:     232, 98, 42;

    /* Estados. Siempre acompañados de texto o ícono: nunca sólo color. */
    --success:        #3FAE6A;
    --success-soft:   rgba(63, 174, 106, .16);
    --warning:        #D6A531;
    --warning-soft:   rgba(214, 165, 49, .16);
    --danger:         #D9534F;
    --danger-soft:    rgba(217, 83, 79, .16);
    --info:           #5B8DEF;
    --info-soft:      rgba(91, 141, 239, .16);

    /* Sombras: sólo en modales y dropdowns. Las cards se separan por borde. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    --backdrop: rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}