/* ===================================================================
   Sistema de Diseño MediaFranca (SDMF)
   Terminal de fósforo ámbar, monocroma. Un solo color extra: el jade
   de los enlaces. La jerarquía la hacen el brillo y el aire, no el color.
   =================================================================== */

/* ---------------- Color ---------------- */
:root {
  color-scheme: dark;

  /* Rampa de fósforo ámbar (Hercules P3) */
  --amber-50:#FFF4DE; --amber-100:#FFE6B8; --amber-200:#FFD489; --amber-300:#FFC24D;
  --amber-400:#FFB000; --amber-500:#DB9200; --amber-600:#A86E00; --amber-700:#734B00;
  --amber-800:#4A3000; --amber-900:#2A1B00;

  --void:#000000;

  /* Roles semánticos: la pantalla de fósforo */
  --screen:#140D03;
  --screen-deep:#0C0802;
  --panel:#1C1206;
  --panel-raised:#241809;
  --ink:#F2CE86;
  --ink-bright:#FFE6B8;
  --ink-dim:#B07E30;
  --ink-faint:#6E5220;
  --signal:#FFB000;
  --signal-soft:#FFC24D;
  --line:rgba(255,176,0,.24);
  --line-strong:rgba(255,176,0,.52);
  --glow:255,176,0;

  /* Único color extra: jade turquesa, reservado a los enlaces.
     10.3:1 sobre --screen — mismo peso óptico que el ámbar, para que
     lea como par y no como alarma. */
  --jade:#2FD4B8;
  --jade-bright:#5FE6D0;
  --jade-glow:47,212,184;
}

/* ---------------- Tipografía ----------------
   Monoespaciada. IBM Plex Mono para todo: Light (300) en display —el
   "grito silencioso"— y 400/500/600 para UI.

   RETÍCULA DE LÍNEA BASE: --baseline = 8px. Toda altura de línea y todo
   espacio vertical es múltiplo entero de esa unidad. Por eso las alturas
   de línea se declaran en rem absolutos (no en razones): una razón produce
   fracciones de píxel y rompe la retícula. */
:root {
  --font-display:"IBM Plex Mono", ui-monospace, "Fira Code", "SFMono-Regular", monospace;
  --font-mono:"IBM Plex Mono", ui-monospace, "Fira Code", "SFMono-Regular", monospace;
  --font-body:var(--font-mono);

  --w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  --baseline:8px;

  /* Escala de texto. Cada tamaño tiene una altura de línea fija en la
     retícula; el comentario indica cuántas unidades ocupa. */
  --t-xs:0.6875rem;   /* 11 · lh 16 = 2u */
  --t-sm:0.75rem;     /* 12 · lh 24 = 3u */
  --t-base:0.875rem;  /* 14 · lh 24 = 3u */
  --t-md:1rem;        /* 16 · lh 24 = 3u */
  --t-lg:1.125rem;    /* 18 · lh 32 = 4u */
  --t-xl:1.375rem;    /* 22 · lh 32 = 4u */
  --t-2xl:1.875rem;   /* 30 · lh 40 = 5u */
  --t-3xl:2.5rem;     /* 40 · lh 48 = 6u */

  /* Alturas de línea = múltiplos de la línea base */
  --lh-2u:1rem;    /* 16 */
  --lh-3u:1.5rem;  /* 24 */
  --lh-4u:2rem;    /* 32 */
  --lh-5u:2.5rem;  /* 40 */
  --lh-6u:3rem;    /* 48 */
  --lh-7u:3.5rem;  /* 56 */
  --lh-10u:5rem;   /* 80 */

  /* Tracking */
  --track-tight:-0.02em; --track-normal:0; --track-wide:0.08em;
  --track-wider:0.16em; --track-widest:0.32em;
}

/* ---------------- Espaciado ----------------
   Vertical: SÓLO múltiplos de 8 (la línea base). Los valores de 4, 12 y
   20 existen para separaciones horizontales e inline, donde la retícula
   no aplica; usarlos en vertical la rompe. */
:root {
  --space-0:0;
  --space-1:4px;    /* sólo horizontal */
  --space-2:8px;    /* 1u */
  --space-3:12px;   /* sólo horizontal */
  --space-4:16px;   /* 2u */
  --space-5:20px;   /* sólo horizontal */
  --space-6:24px;   /* 3u */
  --space-8:32px;   /* 4u */
  --space-10:40px;  /* 5u */
  --space-12:48px;  /* 6u */
  --space-16:64px;  /* 8u */
  --space-20:80px;  /* 10u */
  --space-24:96px;  /* 12u */
  --space-32:128px; /* 16u */
  --space-40:160px; /* 20u */

  --container:1160px;
  --container-wide:1360px;
  --gutter:24px;
  --section-y:var(--space-32);
}

/* ---------------- Efectos ---------------- */
:root {
  /* Radios: terminal cuadrada */
  --r-none:0; --r-sm:2px; --r-md:4px; --r-pill:999px;

  /* Bordes */
  --bw:1px; --bw-thick:2px;
  --border:var(--bw) solid var(--line);
  --border-strong:var(--bw) solid var(--line-strong);

  /* Brillo de fósforo */
  --glow-sm:0 0 4px rgba(var(--glow),.35);
  --glow-md:0 0 2px rgba(var(--glow),.5), 0 0 12px rgba(var(--glow),.32);
  --glow-lg:0 0 3px rgba(var(--glow),.6), 0 0 20px rgba(var(--glow),.42), 0 0 48px rgba(var(--glow),.22);
  --text-glow:0 0 6px rgba(var(--glow),.4);
  --text-glow-strong:0 0 2px rgba(var(--glow),.55), 0 0 16px rgba(var(--glow),.5);

  /* Movimiento */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --transition:all var(--dur-base) var(--ease);

  /* Textura CRT: sólo scanlines. La retícula de puntos se eliminó. */
  --scanlines:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px);

  /* z-index */
  --z-base:0; --z-sticky:100; --z-overlay:200; --z-modal:300;
}

@keyframes crt-flicker {
  0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.82} 94%{opacity:1} 97%{opacity:.9} 98%{opacity:1}
}
@keyframes cursor-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes node-blink { 0%,100%{opacity:1} 50%{opacity:.55} }

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