/* =====================================================================
   EduLDN — Tokens de diseño (Material Design 3 + colores de marca)
   Mapeados a las variables de Bootstrap 5.3 para tema claro y oscuro.

   NOTA DE ACCESIBILIDAD
   El azul de marca #1496D2 sobre blanco da 3.3:1 y el naranja #F47B20 da 2.7:1.
   Ninguno alcanza 4.5:1 para texto normal. Por eso:
   - Los colores de marca se usan en superficies, iconos grandes, bordes y decoración.
   - Para texto y botones con texto blanco se usa --ldn-primary-strong (#0F78A8, 4.9:1).
   - El naranja se usa con texto oscuro (--ldn-on-secondary) o como acento no textual.
   ===================================================================== */

:root,
[data-bs-theme="light"] {
    /* Marca */
    --ldn-brand-blue:   #1496D2;
    --ldn-brand-orange: #F47B20;

    /* Primary */
    --ldn-primary:              #1496D2;
    --ldn-primary-strong:       #0F78A8;   /* texto/botones: AA sobre blanco */
    --ldn-primary-hover:        #0C6690;
    --ldn-on-primary:           #FFFFFF;
    --ldn-primary-container:    #D6EEFA;
    --ldn-on-primary-container: #063C58;
    --ldn-primary-rgb:          15, 120, 168;

    /* Secondary (naranja) */
    --ldn-secondary:              #F47B20;
    --ldn-secondary-strong:       #C25A0A;  /* texto naranja AA sobre blanco (4.6:1) */
    --ldn-on-secondary:           #3D1800;
    --ldn-secondary-container:    #FFE3CF;
    --ldn-on-secondary-container: #4E1F00;
    --ldn-secondary-rgb:          244, 123, 32;

    /* Tertiary (verde suave para éxito/acentos infantiles) */
    --ldn-tertiary:              #2E9E6B;
    --ldn-tertiary-container:    #D6F3E5;
    --ldn-on-tertiary-container: #0B3F27;

    /* Superficies */
    --ldn-background:          #F5F7FA;
    --ldn-surface:             #FFFFFF;
    --ldn-surface-2:           #EEF2F6;
    --ldn-surface-variant:     #E4E9EF;
    --ldn-on-surface:          #1B1C1E;
    --ldn-on-surface-variant:  #44474C;
    --ldn-on-surface-muted:    #5F636A;
    --ldn-outline:             #C6CCD3;
    --ldn-outline-variant:     #E1E5EA;

    /* Estados */
    --ldn-error:              #B3261E;
    --ldn-error-container:    #F9DEDC;
    --ldn-on-error-container: #410E0B;
    --ldn-success:            #1B7F3B;
    --ldn-success-container:  #D3F1DC;
    --ldn-warning:            #8A5A00;
    --ldn-warning-container:  #FFE8B3;
    --ldn-info:               #0F78A8;
    --ldn-info-container:     #D6EEFA;

    /* Elevación */
    --ldn-shadow-1: 0 1px 2px rgba(27, 28, 30, .06), 0 1px 3px 1px rgba(27, 28, 30, .05);
    --ldn-shadow-2: 0 2px 6px 2px rgba(27, 28, 30, .08), 0 1px 2px rgba(27, 28, 30, .10);
    --ldn-shadow-3: 0 6px 16px 4px rgba(27, 28, 30, .10), 0 2px 4px rgba(27, 28, 30, .12);

    /* Forma */
    --ldn-radius-sm: 8px;
    --ldn-radius:    12px;
    --ldn-radius-lg: 16px;
    --ldn-radius-xl: 24px;

    /* Layout */
    --ldn-sidebar-width: 268px;
    --ldn-sidebar-collapsed: 76px;
    --ldn-topbar-height: 64px;

    /* ---- Mapeo a Bootstrap ---- */
    --bs-body-bg:            var(--ldn-background);
    --bs-body-color:         var(--ldn-on-surface);
    --bs-body-font-family:   "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-secondary-color:    var(--ldn-on-surface-muted);
    --bs-tertiary-bg:        var(--ldn-surface-2);
    --bs-secondary-bg:       var(--ldn-surface-variant);
    --bs-border-color:       var(--ldn-outline-variant);
    --bs-border-radius:      var(--ldn-radius);
    --bs-border-radius-sm:   var(--ldn-radius-sm);
    --bs-border-radius-lg:   var(--ldn-radius-lg);
    --bs-border-radius-xl:   var(--ldn-radius-xl);
    --bs-primary:            var(--ldn-primary-strong);
    --bs-primary-rgb:        var(--ldn-primary-rgb);
    --bs-primary-text-emphasis: var(--ldn-on-primary-container);
    --bs-primary-bg-subtle:  var(--ldn-primary-container);
    --bs-primary-border-subtle: #A9D8F0;
    --bs-secondary:          var(--ldn-secondary-strong);
    --bs-secondary-rgb:      194, 90, 10;
    --bs-secondary-bg-subtle: var(--ldn-secondary-container);
    --bs-secondary-text-emphasis: var(--ldn-on-secondary-container);
    --bs-success:            var(--ldn-success);
    --bs-success-rgb:        27, 127, 59;
    --bs-success-bg-subtle:  var(--ldn-success-container);
    --bs-success-text-emphasis: #0B3F27;
    --bs-danger:             var(--ldn-error);
    --bs-danger-rgb:         179, 38, 30;
    --bs-danger-bg-subtle:   var(--ldn-error-container);
    --bs-danger-text-emphasis: var(--ldn-on-error-container);
    --bs-warning:            var(--ldn-warning);
    --bs-warning-rgb:        138, 90, 0;
    --bs-warning-bg-subtle:  var(--ldn-warning-container);
    --bs-warning-text-emphasis: #4A3000;
    --bs-info:               var(--ldn-info);
    --bs-info-rgb:           15, 120, 168;
    --bs-info-bg-subtle:     var(--ldn-info-container);
    --bs-info-text-emphasis: var(--ldn-on-primary-container);
    --bs-link-color:         var(--ldn-primary-strong);
    --bs-link-color-rgb:     var(--ldn-primary-rgb);
    --bs-link-hover-color:   var(--ldn-primary-hover);
    --bs-link-hover-color-rgb: 12, 102, 144;
    --bs-focus-ring-color:   rgba(15, 120, 168, .35);
    --bs-heading-color:      var(--ldn-on-surface);
    --bs-emphasis-color:     var(--ldn-on-surface);
    --bs-code-color:         var(--ldn-secondary-strong);
}

[data-bs-theme="dark"] {
    --ldn-primary:              #5FBDEA;
    --ldn-primary-strong:       #7CCBF2;   /* AA sobre superficies oscuras */
    --ldn-primary-hover:        #A3DCF7;
    --ldn-on-primary:           #003549;
    --ldn-primary-container:    #0B4D6E;
    --ldn-on-primary-container: #D6EEFA;
    --ldn-primary-rgb:          124, 203, 242;

    --ldn-secondary:              #FFA76A;
    --ldn-secondary-strong:       #FFB98A;
    --ldn-on-secondary:           #3D1800;
    --ldn-secondary-container:    #6E3300;
    --ldn-on-secondary-container: #FFE3CF;
    --ldn-secondary-rgb:          255, 167, 106;

    --ldn-tertiary:              #7ED3A6;
    --ldn-tertiary-container:    #12503A;
    --ldn-on-tertiary-container: #D6F3E5;

    --ldn-background:          #121417;
    --ldn-surface:             #1C1F23;
    --ldn-surface-2:           #24282D;
    --ldn-surface-variant:     #2C3137;
    --ldn-on-surface:          #E4E6E9;
    --ldn-on-surface-variant:  #C4C9D0;
    --ldn-on-surface-muted:    #A6ABB3;
    --ldn-outline:             #5C6169;
    --ldn-outline-variant:     #363B42;

    --ldn-error:              #F2B8B5;
    --ldn-error-container:    #5C1A16;
    --ldn-on-error-container: #F9DEDC;
    --ldn-success:            #8AD9A5;
    --ldn-success-container:  #16482A;
    --ldn-warning:            #F5C96B;
    --ldn-warning-container:  #4A3000;
    --ldn-info:               #7CCBF2;
    --ldn-info-container:     #0B4D6E;

    --ldn-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px 1px rgba(0, 0, 0, .25);
    --ldn-shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
    --ldn-shadow-3: 0 6px 16px 4px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .35);

    --bs-body-bg:            var(--ldn-background);
    --bs-body-color:         var(--ldn-on-surface);
    --bs-secondary-color:    var(--ldn-on-surface-muted);
    --bs-tertiary-bg:        var(--ldn-surface-2);
    --bs-secondary-bg:       var(--ldn-surface-variant);
    --bs-border-color:       var(--ldn-outline-variant);
    --bs-primary:            var(--ldn-primary-strong);
    --bs-primary-rgb:        var(--ldn-primary-rgb);
    --bs-primary-text-emphasis: #A3DCF7;
    --bs-primary-bg-subtle:  var(--ldn-primary-container);
    --bs-primary-border-subtle: #0F78A8;
    --bs-secondary:          var(--ldn-secondary-strong);
    --bs-secondary-rgb:      255, 185, 138;
    --bs-secondary-bg-subtle: var(--ldn-secondary-container);
    --bs-secondary-text-emphasis: #FFD9BF;
    --bs-success:            var(--ldn-success);
    --bs-success-rgb:        138, 217, 165;
    --bs-success-bg-subtle:  var(--ldn-success-container);
    --bs-success-text-emphasis: #B5EBC8;
    --bs-danger:             var(--ldn-error);
    --bs-danger-rgb:         242, 184, 181;
    --bs-danger-bg-subtle:   var(--ldn-error-container);
    --bs-danger-text-emphasis: #F9DEDC;
    --bs-warning:            var(--ldn-warning);
    --bs-warning-rgb:        245, 201, 107;
    --bs-warning-bg-subtle:  var(--ldn-warning-container);
    --bs-warning-text-emphasis: #FFE8B3;
    --bs-info:               var(--ldn-info);
    --bs-info-rgb:           124, 203, 242;
    --bs-info-bg-subtle:     var(--ldn-info-container);
    --bs-info-text-emphasis: #D6EEFA;
    --bs-link-color:         var(--ldn-primary-strong);
    --bs-link-color-rgb:     var(--ldn-primary-rgb);
    --bs-link-hover-color:   var(--ldn-primary-hover);
    --bs-link-hover-color-rgb: 163, 220, 247;
    --bs-focus-ring-color:   rgba(124, 203, 242, .4);
    --bs-heading-color:      var(--ldn-on-surface);
    --bs-emphasis-color:     var(--ldn-on-surface);
}

/* ---- Escala tipográfica M3 ---- */
.md-display { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
.md-headline { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; line-height: 1.25; }
.md-title { font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.md-title-sm { font-size: 1rem; font-weight: 500; line-height: 1.5; }
.md-body { font-size: 1rem; line-height: 1.5; }
.md-body-sm { font-size: .875rem; line-height: 1.45; }
.md-label { font-size: .75rem; font-weight: 500; line-height: 1.33; letter-spacing: .04em; text-transform: uppercase; color: var(--ldn-on-surface-muted); }