/* ============================================================================
   TOKENS  ·  Identidad "Sala de Control"
   ----------------------------------------------------------------------------
   Base grafito con un único acento: naranja señal. El naranja no decora, marca
   dónde mirar, así que nunca debe pasar del 10 % de la superficie.

   Sistema de radios: esquinas rectas en toda la página.
     --r-card / --r-ui / --r-chip = 4px
   No hay pastillas. La forma es parte de la identidad: recta y operativa.

   Contraste verificado en los dos temas (22 combinaciones, todas AA o mejor).
   ============================================================================ */

:root {
  /* --- Tipografia --------------------------------------------------------- */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-display: clamp(2.75rem, 8.5vw, 5rem);
  --fs-h2:      clamp(1.75rem, 3.8vw, 2.625rem);
  --fs-h3:      clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --fs-metric:  clamp(2.25rem, 6vw, 3.5rem);

  /* --- Espaciado ---------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --pad-seccion: clamp(4.5rem, 9vw, 7rem);
  --ancho-max: 1240px;
  --ancho-prosa: 62ch;

  /* --- Forma: recta, sin pastillas ---------------------------------------- */
  --r-card: 4px;
  --r-ui: 4px;
  --r-chip: 4px;

  /* --- Capas -------------------------------------------------------------- */
  --z-nav: 100;
  --z-menu: 200;

  /* --- Movimiento --------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rapida: 160ms;
  --dur-media: 320ms;
  --dur-lenta: 620ms;

  /* --- Color: tema claro -------------------------------------------------- */
  --bg:            #f6f7f7;
  --bg-alt:        #edefef;
  --superficie:    #ffffff;
  --superficie-2:  #f3f5f5;
  --linea:         #dee2e3;
  --linea-fuerte:  #c4cacc;
  --texto:         #16191c;
  --texto-suave:   #454c51;
  --texto-tenue:   #5c6367;
  /* En papel el naranja señal no contrasta: se usa el naranja tinta */
  --acento:        #b8430a;
  --acento-fuerte: #96360a;
  --acento-tinte:  rgba(184, 67, 10, 0.08);
  --acento-borde:  rgba(184, 67, 10, 0.24);
  --sobre-acento:  #ffffff;
  --sombra:        0 18px 40px -24px rgba(20, 22, 24, 0.30);
  --sombra-alta:   0 26px 60px -28px rgba(20, 22, 24, 0.36);
  --foco:          #b8430a;
  --reticula:      rgba(22, 25, 28, 0.055);
  --logo-filtro:   none;

  /* Retrato del hero, tema claro */
  --retrato-filtro:  saturate(1.04) contrast(1.03);
}

/* --- Color: tema oscuro (el modo natural de esta identidad) ---------------- */
:root[data-tema='oscuro'] {
  --bg:            #0e1113;
  --bg-alt:        #121618;
  --superficie:    #171b1e;
  --superficie-2:  #1d2226;
  --linea:         #2a3034;
  --linea-fuerte:  #3a4247;
  --texto:         #eceff1;
  --texto-suave:   #a3acb2;
  --texto-tenue:   #8a939a;
  --acento:        #f0651f;
  --acento-fuerte: #ff7a38;
  --acento-tinte:  rgba(240, 101, 31, 0.10);
  --acento-borde:  rgba(240, 101, 31, 0.28);
  --sobre-acento:  #0e1113;
  --sombra:        0 18px 40px -24px rgba(0, 0, 0, 0.72);
  --sombra-alta:   0 26px 60px -28px rgba(0, 0, 0, 0.82);
  --foco:          #f0651f;
  --reticula:      rgba(236, 239, 241, 0.05);
  --logo-filtro:   invert(1) brightness(1.9);

  /* Retrato del hero, tema oscuro: se disuelve en el fondo */
  --retrato-filtro:  saturate(1.06) contrast(1.05);
}

/* Sin elección manual, manda el sistema operativo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --bg:            #0e1113;
    --bg-alt:        #121618;
    --superficie:    #171b1e;
    --superficie-2:  #1d2226;
    --linea:         #2a3034;
    --linea-fuerte:  #3a4247;
    --texto:         #eceff1;
    --texto-suave:   #a3acb2;
    --texto-tenue:   #8a939a;
    --acento:        #f0651f;
    --acento-fuerte: #ff7a38;
    --acento-tinte:  rgba(240, 101, 31, 0.10);
    --acento-borde:  rgba(240, 101, 31, 0.28);
    --sobre-acento:  #0e1113;
    --sombra:        0 18px 40px -24px rgba(0, 0, 0, 0.72);
    --sombra-alta:   0 26px 60px -28px rgba(0, 0, 0, 0.82);
    --foco:          #f0651f;
    --reticula:      rgba(236, 239, 241, 0.05);
    --logo-filtro:   invert(1) brightness(1.9);

    --retrato-filtro:  saturate(1.06) contrast(1.05);
  }
}