/* ============================================================================
   rsaas.io — SISTEMA DE DISEÑO · TOKENS
   v1.0 · 2026-08-28
   ----------------------------------------------------------------------------
   Dos colores. Una tipografía. Cero curvas.
   Este archivo solo declara variables. No pinta nada.
   ============================================================================ */

/* Tipografía autoalojada: el navegador del visitante no contacta con Google. */
@import url('fuente.css');

:root {
  /* ── 1. LOS DOS COLORES ────────────────────────────────────────────────
     No existe un tercero. Nunca. */
  --ink:    #000000;
  --paper:  #FFFFFF;

  /* ── 2. SUSTRATO ───────────────────────────────────────────────────────
     Todo lo demás se deriva de este par. Invertir el sustrato invierte
     la interfaz entera sin redefinir un solo token. */
  --bg: var(--paper);
  --fg: var(--ink);

  /* ── 3. DENSIDADES DE TINTA ────────────────────────────────────────────
     No son grises nuevos: es la MISMA tinta impresa a menor densidad,
     calculada siempre contra el sustrato. Por eso sobreviven a la inversión. */
  --fg-90: color-mix(in srgb, var(--fg) 90%, var(--bg));
  --fg-72: color-mix(in srgb, var(--fg) 72%, var(--bg));
  --fg-56: color-mix(in srgb, var(--fg) 56%, var(--bg));
  --fg-40: color-mix(in srgb, var(--fg) 40%, var(--bg));
  --fg-24: color-mix(in srgb, var(--fg) 24%, var(--bg));
  --fg-14: color-mix(in srgb, var(--fg) 14%, var(--bg));
  --fg-08: color-mix(in srgb, var(--fg)  8%, var(--bg));
  --fg-04: color-mix(in srgb, var(--fg)  4%, var(--bg));

  /* ── 4. TIPOGRAFÍA ─────────────────────────────────────────────────────
     Una sola familia para todo. IBM Plex Mono, SIL OFL, uso comercial libre. */
  --font: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
          Consolas, 'Liberation Mono', monospace;

  --w-light:  300;
  --w-book:   400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;

  /* Escala. Mono ocupa más ancho que sans: el cuerpo baja a 15px. */
  --t-mega:    clamp(3.25rem, 13vw, 11rem);
  --t-display: clamp(2.25rem, 6.2vw, 4.5rem);
  --t-h1:      clamp(1.625rem, 3.4vw, 2.375rem);
  --t-h2:      clamp(1.25rem, 2.2vw, 1.5rem);
  --t-h3:      1.0625rem;
  --t-body:    0.9375rem;   /* 15px */
  --t-small:   0.8125rem;   /* 13px */
  --t-micro:   0.6875rem;   /* 11px — etiquetas, metadatos, telemetría */

  /* Tracking. Negativo para que los titulares cuajen en bloque;
     muy positivo en micro para que la etiqueta lea como matriz de terminal. */
  --tr-mega:   -0.055em;
  --tr-display:-0.04em;
  --tr-head:   -0.02em;
  --tr-body:    0;
  --tr-label:   0.16em;
  --tr-micro:   0.22em;

  /* Interlineado */
  --lh-mega: 0.86;
  --lh-head: 1.06;
  --lh-body: 1.65;
  --lh-data: 1.3;

  /* ── 5. RETÍCULA Y ESPACIO ─────────────────────────────────────────────
     Base 4px. Nada fuera de la escala. */
  --s0:  0;
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;
  --s11: 192px;

  --max:     1240px;
  --max-copy: 68ch;     /* medida de lectura en mono */
  --gutter:  var(--s5);
  --cols:    12;

  /* Aire de respeto del logotipo: 1 carácter. Regla nativa de una marca mono. */
  --clearspace: 1ch;

  /* ── 6. GEOMETRÍA ──────────────────────────────────────────────────────
     El radio es cero y no es negociable. */
  --radius: 0;
  --rule:       1px;
  --rule-heavy: 2px;
  --rule-block: 4px;

  /* ── 7. MOVIMIENTO ─────────────────────────────────────────────────────
     Mecánico, no orgánico. Nada rebota. */
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 260ms;
  --ease:      cubic-bezier(.2, 0, 0, 1);
  --ease-mech: steps(5, end);
  --blink:     1.06s;

  /* ── 8. TRAMAS ─────────────────────────────────────────────────────────
     La textura sustituye al color. Es lo que diferencia estados
     sin introducir un tercer tono. */
  --hatch:      repeating-linear-gradient(45deg,
                  var(--fg) 0 1.5px, transparent 1.5px 6px);
  --hatch-bold: repeating-linear-gradient(45deg,
                  var(--fg) 0 4px, transparent 4px 10px);
  --halftone:   radial-gradient(var(--fg) 38%, transparent 39%);
  --halftone-size: 4px 4px;
  --scan:       repeating-linear-gradient(0deg,
                  transparent 0 2px, var(--fg-08) 2px 3px);
  --grid-line:  linear-gradient(var(--fg-08) var(--rule), transparent 0),
                linear-gradient(90deg, var(--fg-08) var(--rule), transparent 0);
  --grid-size:  var(--s5) var(--s5);

  /* ── 9. CAPAS ──────────────────────────────────────────────────────────
     Sin sombras. La profundidad se construye apilando y invirtiendo. */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 800;
  --z-modal: 900;
}

/* ── INVERSIÓN ────────────────────────────────────────────────────────────
   El único "acento" del sistema. Aplicable a la raíz (modo oscuro completo)
   o a cualquier bloque suelto (énfasis tipográfico). */
[data-surface="ink"] {
  --bg: var(--ink);
  --fg: var(--paper);
}
[data-surface="paper"] {
  --bg: var(--paper);
  --fg: var(--ink);
}

/* Modo oscuro del sistema operativo = la misma marca, invertida. */
@media (prefers-color-scheme: dark) {
  :root:not([data-surface="paper"]) {
    --bg: var(--ink);
    --fg: var(--paper);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}