/* ============================================================
   GIRAE - Tokens de diseño
   Fuente única de verdad de color, tipografía, espacio, radio y elevación.
   Ningún componente inventa un valor: todos consumen estas variables.
   ============================================================ */

/* ------------------------------------------------------------
   1. Color - modo claro
   ------------------------------------------------------------ */
:root {
    /* Marca */
    --girae-primary:          #155EEF;
    --girae-primary-dark:     #0B3B8F;
    --girae-primary-light:    #DCE9FF;
    --girae-secondary:        #0F9D8A;
    --girae-secondary-light:  #D8F5EF;

    /* Superficies */
    --girae-background:       #F8FAFC;
    --girae-surface:          #FFFFFF;
    --girae-surface-2:        #F1F5F9;

    /* Texto y bordes */
    --girae-text:             #1E293B;
    --girae-text-secondary:   #64748B;
    --girae-border:           #E2E8F0;
    /* Borde de un campo de formulario: --girae-border (1.2:1) es apenas un
       divisor decorativo entre tarjetas, no alcanza 3:1 para el borde de un
       control interactivo (WCAG 1.4.11). Este token sí alcanza 3:1 en claro
       y oscuro con el mismo valor — se usa solo en .form-control/.form-select
       /.form-check-input, nunca en tarjetas ni tablas. */
    --girae-border-control:   #7C8CA3;

    /* Estado */
    --girae-success:          #16A34A;
    --girae-warning:          #F59E0B;
    --girae-priority:         #EA580C;
    --girae-danger:           #DC2626;

    /* ------------------------------------------------------------
       Variantes de TEXTO. Obligatorias.
       #0F9D8A, #16A34A y #EA580C no llegan a 4.5:1 sobre fondo claro:
       sirven para fondos, bordes, iconos y texto grande, no para texto normal.
       Para texto normal se usan estas variantes oscuras.
       #F59E0B nunca es color de texto sobre blanco: va como fondo con
       --girae-text encima.
       ------------------------------------------------------------ */
    --girae-secondary-text:   #0B7A6B;
    --girae-success-text:     #15803D;
    --girae-priority-text:    #C2410C;
    --girae-danger-text:      #DC2626;   /* 4.8:1, apto para texto normal */
    --girae-primary-text:     #155EEF;   /* 5.4:1, apto para texto normal */
    --girae-warning-text:     #1E293B;   /* sobre fondo ámbar */

    /* Fondos suaves de estado (contenedores tonales) */
    --girae-success-bg:       #DCFCE7;
    --girae-warning-bg:       #FEF3C7;
    --girae-priority-bg:      #FFEDD5;
    --girae-danger-bg:        #FEE2E2;
    --girae-info-bg:          #DCE9FF;

    /* Capas de interacción M3 sobre superficie */
    --girae-hover:            rgba(21, 94, 239, 0.08);
    --girae-active:           rgba(21, 94, 239, 0.12);
    --girae-focus-ring:       #155EEF;
    --girae-overlay:          rgba(15, 23, 42, 0.48);

    /* ------------------------------------------------------------
       2. Tipografía - escala Material Design 3 sobre Roboto
       ------------------------------------------------------------ */
    --girae-fuente: 'Roboto', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    --girae-display-large:    400 3.5625rem/4rem var(--girae-fuente);      /* 57/64 */
    --girae-display-medium:   400 2.8125rem/3.25rem var(--girae-fuente);   /* 45/52 */
    --girae-display-small:    400 2.25rem/2.75rem var(--girae-fuente);     /* 36/44 */

    --girae-headline-large:   400 2rem/2.5rem var(--girae-fuente);         /* 32/40 */
    --girae-headline-medium:  400 1.75rem/2.25rem var(--girae-fuente);     /* 28/36 */
    --girae-headline-small:   400 1.5rem/2rem var(--girae-fuente);         /* 24/32 */

    --girae-title-large:      400 1.375rem/1.75rem var(--girae-fuente);    /* 22/28 */
    --girae-title-medium:     500 1rem/1.5rem var(--girae-fuente);         /* 16/24 */
    --girae-title-small:      500 0.875rem/1.25rem var(--girae-fuente);    /* 14/20 */

    --girae-body-large:       400 1rem/1.5rem var(--girae-fuente);         /* 16/24 */
    --girae-body-medium:      400 0.875rem/1.25rem var(--girae-fuente);    /* 14/20 */
    --girae-body-small:       400 0.75rem/1rem var(--girae-fuente);        /* 12/16 */

    --girae-label-large:      500 0.875rem/1.25rem var(--girae-fuente);    /* 14/20 */
    --girae-label-medium:     500 0.75rem/1rem var(--girae-fuente);        /* 12/16 */
    --girae-label-small:      500 0.6875rem/1rem var(--girae-fuente);      /* 11/16 */

    --girae-tracking-label:   0.00625em;

    /* ------------------------------------------------------------
       3. Espaciado
       ------------------------------------------------------------ */
    --girae-espacio-1: 0.25rem;   /*  4px */
    --girae-espacio-2: 0.5rem;    /*  8px */
    --girae-espacio-3: 0.75rem;   /* 12px */
    --girae-espacio-4: 1rem;      /* 16px */
    --girae-espacio-6: 1.5rem;    /* 24px */
    --girae-espacio-8: 2rem;      /* 32px */
    --girae-espacio-12: 3rem;     /* 48px */

    /* ------------------------------------------------------------
       4. Radios
       ------------------------------------------------------------ */
    --girae-radio-sm:   8px;
    --girae-radio-md:   12px;
    --girae-radio-lg:   16px;
    --girae-radio-full: 28px;

    /* ------------------------------------------------------------
       5. Elevación (tres niveles, sombra suave)
       ------------------------------------------------------------ */
    --girae-elevacion-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
    --girae-elevacion-2: 0 2px 6px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
    --girae-elevacion-3: 0 8px 24px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);

    /* ------------------------------------------------------------
       6. Medidas del armazón
       ------------------------------------------------------------ */
    --girae-topbar-alto:        64px;
    --girae-sidebar-ancho:      280px;
    --girae-sidebar-colapsado:  80px;
    --girae-transicion:         200ms cubic-bezier(0.2, 0, 0, 1);
}

/* ------------------------------------------------------------
   7. Color - modo oscuro
   Los valores se derivan, no se reutilizan los del modo claro:
   un color de marca pensado para blanco casi nunca sirve sobre #0F172A.
   Cada par texto/fondo de este bloque supera 4.5:1.
   ------------------------------------------------------------ */
[data-bs-theme="dark"] {
    --girae-primary:          #A8C7FF;   /* 7.8:1 sobre superficie */
    --girae-primary-dark:     #7FA9F5;
    --girae-primary-light:    #1D3A6B;
    --girae-primary-container:#0B3B8F;
    --girae-secondary:        #5EE0CB;   /* 8.2:1 */
    --girae-secondary-light:  #0B4D45;

    --girae-background:       #0F172A;
    --girae-surface:          #1E293B;
    --girae-surface-2:        #273449;

    --girae-text:             #E2E8F0;   /* 10.3:1 */
    --girae-text-secondary:   #94A3B8;   /*  5.2:1 */
    --girae-border:           #334155;

    --girae-success:          #4ADE80;
    --girae-warning:          #FBBF24;
    --girae-priority:         #FB923C;
    --girae-danger:           #F87171;

    /* Variantes de texto: en fondo oscuro los tonos claros son los legibles */
    --girae-secondary-text:   #5EE0CB;   /* 8.2:1 */
    --girae-success-text:     #4ADE80;   /* 7.6:1 */
    --girae-priority-text:    #FB923C;   /* 5.8:1 */
    --girae-danger-text:      #FCA5A5;   /* 7.0:1 */
    --girae-primary-text:     #A8C7FF;   /* 7.8:1 */
    --girae-warning-text:     #FBBF24;   /* 8.0:1 */

    --girae-success-bg:       #14532D;
    --girae-warning-bg:       #4A2F08;
    --girae-priority-bg:      #4A2308;
    --girae-danger-bg:        #4C1D1D;
    --girae-info-bg:          #1D3A6B;

    --girae-hover:            rgba(168, 199, 255, 0.10);
    --girae-active:           rgba(168, 199, 255, 0.16);
    --girae-focus-ring:       #A8C7FF;
    --girae-overlay:          rgba(2, 6, 23, 0.64);

    /* En oscuro la elevación se apoya menos en la sombra y más en la superficie */
    --girae-elevacion-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --girae-elevacion-2: 0 2px 6px rgba(0, 0, 0, 0.48);
    --girae-elevacion-3: 0 8px 24px rgba(0, 0, 0, 0.56);
}