/* ════════════════════════════════════════════════════
   css/base.css — Galaxial
   @font-face · variables · reset.
   Subconjunto de los tokens de Scalar: solo lo que usa esta
   aplicación (no hay prosa, así que no viene Spectral; no hay
   capítulos, así que --accent es uno solo y no cambia).
════════════════════════════════════════════════════ */

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../src/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../src/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../src/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 300; font-display: swap;
             src: url('../src/fonts/martian-mono-300.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../src/fonts/martian-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../src/fonts/martian-mono-500.woff2') format('woff2'); }

/* --accent registrado como color: así el navegador sabe interpolarlo y
   el cambio de acento (app.js lo saca de la galaxia) es un fundido y no
   un salto. Sin @property, una variable CSS no se puede animar. */
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #25a3cf;
}

:root {
  /* ── Fondos ── */
  --bg:   #000000;
  --bg2:  #0a0a0a;
  --bg3:  #111111;
  --bg4:  #1a1a1a;

  /* ── Bordes ── */
  --border:  #222222;
  --border2: #333333;

  /* ── Texto ── (contrastes verificados sobre #000, todos ≥ 4,5:1) */
  --txt:        #aaaaaa;
  --txt-dim:    #808080;
  --txt-bright: #eeeeee;
  --dim:        #757575;

  /* ── Acento ── el cian de Scalar es solo el de arranque: app.js lo
     reemplaza por uno sacado del color de la galaxia. */
  --accent: #25a3cf;
  transition: --accent .9s ease;

  /* ── Tipografía ── */
  --font: 'Outfit', sans-serif;
  --mono: 'Martian Mono', monospace;

  /* ── Escala tipográfica (rem, no px: respeta el zoom de texto) ── */
  --fs-ui-xs: 0.5rem;     /*  8px */
  --fs-ui-s:  0.5625rem;  /*  9px */
  --fs-ui-m:  0.625rem;   /* 10px — el rótulo más frecuente */
  --fs-ui-l:  0.6875rem;  /* 11px */
  --fs-ui-xl: 0.75rem;    /* 12px */
  --fs-s:     0.8125rem;  /* 13px */
  --fs-base:  0.875rem;   /* 14px */
  --fs-m:     1rem;       /* 16px */
  --fs-l:     1.125rem;   /* 18px */

  /* ── Duraciones ── */
  --t-rapida: .15s;
  --t-media:  .25s;
  --t-lenta:  .45s;

  /* ── Radios ── el lenguaje es "sin radius en lo funcional" ── */
  --r-chip:    2px;
  --r-pildora: 999px;
  --r-circulo: 50%;

  /* ── Profundidad ── planos de página con nombre ── */
  --z-lienzo:   0;
  --z-hud:     10;
  --z-panel:  100;
  --z-overlay:200;
  --z-modal:  300;
  --z-toast:  400;
  --z-precarga: 500;   /* la portada de carga, encima de todo */

  /* ── Medidas de la interfaz ── */
  --barra-h:  40px;   /* alto de la barra superior */
  --riel-w:   46px;   /* ancho del riel de iconos */
  --panel-w:  312px;  /* ancho del cajón de parámetros */

  --color-error: #ff5c5c;
  --color-exito: #81c784;
  --color-aviso: #ffba2f;

  /* Oscura siempre, por diseño — no según el sistema. `only` (y no solo
     `dark`) es a propósito: le pide al navegador los controles nativos
     (scrollbar, <select>…) EN OSCURO SIEMPRE, sin importar lo que diga
     prefers-color-scheme. Junto con el <meta name="color-scheme"> de
     index.php (mismo valor, misma razón: uno lo ve el navegador antes de
     que este archivo cargue) es la señal que hace que Chrome/Edge no le
     apliquen a la página su "oscurecido automático" ni la reprocesen
     extensiones tipo Dark Reader que ya respetan esa señal. */
  color-scheme: only dark;
}

/* El "Modo de colores forzados" de Windows (accesibilidad: reemplaza
   TODOS los colores de autor por la paleta de alto contraste del sistema)
   es distinto de una extensión, pero el efecto es el mismo que preocupa acá:
   colores que ya no son los de la galaxia. Se puede desactivar por
   elemento (forced-color-adjust: none) y es lo correcto hacerlo cuando el
   color no es decoración sino la herramienta — el acento que sale de cada
   galaxia, la paleta, la rueda de color del selector, la vista previa del
   marco de exportación —, no cuando es solo legibilidad de texto sobre un
   fondo (ahí el modo de alto contraste sigue ayudando a quien lo necesita).
   Como en Galaxial casi todo cae en el primer caso — es una herramienta de
   color — se desactiva para toda la aplicación de una vez, en vez de ir
   marcando elemento por elemento y dejar huecos. */
:root, *, *::before, *::after { forced-color-adjust: none; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  overflow: hidden;            /* la página no hace scroll: el lienzo la ocupa entera */
  overscroll-behavior: none;
}
/* El tamaño base va SOLO en body. Estaba también en html, y como rem se
   mide contra html, 1rem valía 14 px en vez de 16: toda la escala salía
   12,5 % más chica de lo que anotan los tokens (el "10 px" medía 8,75). */
body { font-size: var(--fs-base); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Solo para lectores de pantalla */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}