/* ==========================================================
   IEEE Student Branch EPN — Tokens del sistema de diseño
   Color: paleta IEEE (IEEE Blue PMS 3015 C, azules oscuros de la
   paleta ampliada y PMS 158 C naranja como único acento).
   Tipografía: Open Sans (fuente web de IEEE) + IBM Plex Mono para
   etiquetas técnicas. Contrastes medidos para WCAG 2.2 AA.
   ========================================================== */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../assets/fonts/open-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../assets/fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Color de marca: igual en ambos temas -------------------------------- */
  --c-blue:        #00629B;   /* IEEE Blue: rellenos con texto blanco (6.5:1) */
  --c-blue-20:     #CADCEA;
  --c-navy:        #002855;
  --c-deep:        #00142E;   /* fondo del visor y de los encabezados de página */
  --c-deep-2:      #021B3D;
  --c-orange:      #E87722;   /* acento: fondo del botón principal, con texto --c-deep (6.2:1) */
  --c-footer:      #020B1F;   /* pie de página */
  --c-white:       #FFFFFF;

  --c-on-dark:       #E8EEF5;
  --c-on-dark-muted: #A9B7C8; /* 9:1 sobre --c-deep */
  --c-line-dark:     rgba(255, 255, 255, .2);   /* también el marco del visor */

  /* Tipografía ----------------------------------------------------------- */
  --f-sans: "Open Sans", Arial, Helvetica, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs:   .8125rem;                                  /* 13 */
  --fs-sm:   .875rem;                                   /* 14 */
  --fs-base: 1rem;                                      /* 16 */
  --fs-md:   1.25rem;                                   /* 20 */
  --fs-lg:   clamp(1.5rem, 1.25rem + .9vw, 1.75rem);    /* 24 → 28 */
  --fs-xl:   clamp(2rem, 1.45rem + 1.9vw, 2.5rem);      /* 32 → 40 */
  --fs-2xl:  clamp(2.5rem, 1.5rem + 3.6vw, 4rem);       /* 40 → 64 */

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* Espaciado (base 4) ---------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(var(--sp-8), 5vw + var(--sp-5), var(--sp-9));

  /* Radios: distintos por función, no uno para todo --------------------- */
  --r-ctl:   2px;     /* botones y campos */
  --r-panel: 12px;    /* módulos y paneles */
  --r-media: 0;       /* fotos y video: esquinas rectas */
  --r-round: 999px;   /* solo marcadores */

  /* Movimiento: una curva, tres duraciones -------------------------------- */
  --ease:  cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* solo para el rebote del pie (pedido expreso) */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;

  /* Estructura ----------------------------------------------------------- */
  --wrap:     1200px;
  --gutter:   24px;
  --meta-h:   36px;
  --header-h: 72px;
  --foot-fade: 72px;   /* degradado sobre la sección anterior al pie: ≤ su relleno inferior */
}
/* ==========================================================
   Temas. La página SIEMPRE empieza en claro: el script del <head>
   solo aplica "dark" si el usuario lo eligió antes (localStorage).
   No se usa prefers-color-scheme a propósito.
   Contrastes medidos (texto ≥ 4.5:1, bordes de campos y foco ≥ 3:1).
   ========================================================== */
:root, [data-theme="light"] {
  color-scheme: light;
  --c-bg:           #FFFFFF;   /* fondo de la página */
  --c-surface:      #F4F6F9;   /* bandas alternas, formulario */
  --c-card:         #FFFFFF;   /* tarjetas, campos, marcos */
  --c-line:         #D6DDE5;
  --c-ink:          #14202E;
  --c-text:         #2E3A48;
  --c-muted:        #566373;   /* 6.1:1 sobre blanco, 5.7:1 sobre --c-surface */
  --c-heading:      #002855;   /* títulos (IEEE navy) */
  --c-link:         #00629B;   /* enlaces y acentos lineales (6.5:1) */
  --c-orange-text:  #A84E00;   /* naranja como texto (5.5:1) */
  --c-tint:         #E6EFF6;   /* fondo suave azul */
  --c-primary-hover:#002855;
  --c-field-border: #7C8897;   /* 3.5:1 sobre blanco */
  --c-field-ring:   rgba(0, 98, 155, .35);
  --c-focus:        #C4600F;   /* anillo de foco: 4.2:1 sobre blanco, 4.4:1 sobre --c-deep */
  --c-error:        #B42318;
  --c-error-bg:     #FDECEA;
  --c-ok:           #1F6B3A;
  --c-pending-bg:   #FFF1E5;
  --c-pending:      #8A3B00;   /* 7:1 sobre --c-pending-bg */
  --c-ph-1:         #E9EEF3;   /* rayado de espacios reservados */
  --c-ph-2:         #F1F4F7;
  --c-header-bg:    #FFFFFF;   /* encabezado sólido */
  --c-menu-bg:      #FFFFFF;   /* menú móvil */
  --c-menu-shadow:  rgba(0, 20, 46, .35);
  --c-logo-plate:   #F4F6F9;   /* fondo de los logos de capítulo */
  --c-meta:         #00142E;   /* meta-navegación IEEE (y theme-color) */
}
[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:           #0B1B30;   /* azul profundo, sin negro puro */
  --c-surface:      #10243F;
  --c-card:         #152D4D;
  --c-line:         #2E4A6D;
  --c-ink:          #F1F5F9;   /* 15.8:1 sobre --c-bg */
  --c-text:         #D3DDE8;   /* 12.6:1 sobre --c-bg, 10.1:1 sobre --c-card */
  --c-muted:        #A8B7C9;   /* 8.5:1 sobre --c-bg, 6.8:1 sobre --c-card */
  --c-heading:      #EEF4FA;
  --c-link:         #7DC1EE;   /* 8.8:1 sobre --c-bg, 7.1:1 sobre --c-card */
  --c-orange-text:  #F6A868;   /* 8.8:1 sobre --c-bg, 7.1:1 sobre --c-card */
  --c-tint:         #183B61;
  --c-primary-hover:#0077BB;   /* texto blanco 4.8:1 */
  --c-field-border: #7F96B2;   /* 4.6:1 sobre --c-card */
  --c-field-ring:   rgba(125, 193, 238, .45);
  --c-focus:        #F08A3E;   /* 6.9:1 sobre --c-bg, 5.6:1 sobre --c-card */
  --c-error:        #FF9C92;   /* 6.9:1 sobre --c-card */
  --c-error-bg:     #3A1E27;
  --c-ok:           #8FDCAB;
  --c-pending-bg:   #3B2716;
  --c-pending:      #FFC99A;   /* 9.5:1 sobre --c-pending-bg */
  --c-ph-1:         #142C4C;
  --c-ph-2:         #183356;
  --c-header-bg:    #0B1B30;
  --c-menu-bg:      #10243F;
  --c-menu-shadow:  rgba(0, 0, 0, .5);
  --c-logo-plate:   #EEF2F6;   /* los logos de capítulo no tienen versión negativa: se apoyan en una placa clara */
  --c-meta:         #020B1F;
}

@media (max-width: 1100px) { :root { --header-h: 64px; } }
@media (max-width: 959px)  { :root { --foot-fade: 56px; } }
@media (max-width: 600px)  { :root { --gutter: 16px; } }