/* ============================================================
   29A LABS — Tokens del sistema de diseño
   Terminal / hacker. Negro profundo, un solo acento: #FC6121.
   Todo lo demás en el theme consume estas variables.
   ============================================================ */

:root {
  /* ── Color: superficies ─────────────────────────────────── */
  --c-void:        #060607;  /* el fondo del fondo, detrás de todo */
  --c-bg:          #0A0A0C;  /* fondo base de la página */
  --c-surface:     #121215;  /* tarjetas, bloques de post */
  --c-surface-2:   #1A1A1F;  /* hover de superficie, code blocks */
  --c-border:      #26262E;  /* bordes, reglas, separadores */
  --c-border-lit:  #3A3A46;  /* borde en hover/focus */

  /* ── Color: texto ───────────────────────────────────────── */
  --c-text:        #E6E6E9;  /* cuerpo */
  --c-text-strong: #FFFFFF;  /* titulares */
  --c-text-dim:    #9B9BA6;  /* metadata, fechas */
  /* El gris más tenue que TODAVÍA pasa WCAG AA (4.68:1) sobre --c-bg.
     Verificado, no estimado. Bajar de acá reprueba a 13px. */
  --c-text-faint:  #7A7A89;  /* placeholders, notas, líneas de comando */

  /* ── Color: acento (el naranja Quarashi) ────────────────── */
  --c-accent:      #FC6121;
  --c-accent-lit:  #FF834D;  /* hover: sube brillo, no cambia tono */
  --c-accent-dim:  #C4491A;  /* pressed / bordes tenues */
  --c-accent-ink:  #0A0A0C;  /* texto SOBRE fondo naranja */
  --c-accent-a10:  rgb(252 97 33 / 0.10);
  --c-accent-a20:  rgb(252 97 33 / 0.20);
  --c-accent-a40:  rgb(252 97 33 / 0.40);
  --c-accent-glow: 0 0 24px rgb(252 97 33 / 0.28);

  /* Selección de texto: el acento, sin negociación */
  --c-selection-bg: var(--c-accent);
  --c-selection-fg: var(--c-accent-ink);

  /* ── Tipografía ─────────────────────────────────────────── */
  /* Mono para todo el "chrome": nav, títulos, metadata, prompts. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Sans humanista para el CUERPO de los posts: los textos son largos
     y una monoespaciada a 1.500 palabras es un castigo para el ojo. */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala tipográfica fluida (clamp: móvil → desktop) */
  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --t-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.09rem);
  --t-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.42rem);
  --t-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.85rem);
  --t-3:  clamp(1.73rem, 1.53rem + 0.98vw, 2.40rem);
  --t-4:  clamp(2.07rem, 1.76rem + 1.55vw, 3.13rem);
  --t-5:  clamp(2.49rem, 2.01rem + 2.38vw, 4.07rem);

  --lh-tight: 1.08;   /* titulares grandes */
  --lh-snug:  1.35;   /* subtítulos */
  --lh-body:  1.72;   /* lectura larga: generoso a propósito */

  --tr-tight: -0.02em;  /* tracking negativo en display */
  --tr-wide:   0.08em;  /* mono en versalitas: nav, etiquetas */
  --tr-wider:  0.16em;

  /* ── Espaciado (escala 1.5×, base 8px) ──────────────────── */
  --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;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --w-prose:   68ch;    /* medida de lectura óptima */
  --w-content: 1140px;  /* contenedor ancho */
  --w-wide:    1440px;  /* full-bleed contenido */
  --gutter:    clamp(1rem, 4vw, 3rem);

  /* ── Bordes y radios ────────────────────────────────────── */
  /* Terminal = filo. Nada de esquinas redondas blandas. */
  --r-sm: 2px;
  --r-md: 3px;
  --hairline: 1px solid var(--c-border);

  /* ── Movimiento ─────────────────────────────────────────── */
  --d-fast:   140ms;
  --d-base:   240ms;
  --d-slow:   480ms;
  --d-glacial: 900ms;
  --e-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* entradas: decelera */
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);    /* estados */
  --e-snap:   cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-overshoot */

  /* ── Elevación (sutil: es una consola, no un dashboard) ─── */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.6);

  /* ── Grid de fondo (la textura de terminal) ─────────────── */
  --grid-line: rgb(255 255 255 / 0.022);
  --grid-size: 32px;
  --scanline:  rgb(255 255 255 / 0.012);

  --z-nav: 100;
  --z-overlay: 200;
}

/* Quien pide menos movimiento, recibe menos movimiento. Sin excepciones. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-glacial: 1ms;
  }
}

/* El blog es dark-only por diseño. Si alguien fuerza light en el SO,
   no lo peleamos con un theme claro a medias: mantenemos la identidad. */
::selection { background: var(--c-selection-bg); color: var(--c-selection-fg); }