/* ============================================================
   N01111 DESIGN SYSTEM — TOKENS
   Exportado desde Claude Design (project f1667846-...). No editar a mano:
   regenerar desde el design system. Machine / glitch / industrial.
   ============================================================ */

/* ---- Webfonts: JetBrains Mono (mono/data) + Saira Condensed (display) ---- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,400&family=Saira+Condensed:wght@500;600;700;800;900&display=swap');

:root {
  /* ===== COLORES — base monocroma ===== */
  --black: #0A0A0A;
  --black-pure: #000000;
  --ink-900: #0F0F10;
  --ink-800: #161617;
  --ink-700: #1F1F21;
  --ink-600: #2A2A2D;
  --ink-500: #3A3A3E;
  --ink-400: #56565C;
  --ink-300: #7A7A82;
  --ink-200: #A8A8B0;
  --ink-100: #D6D6DA;
  --white: #F2F2F0;
  --white-pure: #FFFFFF;

  /* Signal red (identidad / prensa) */
  --red-500: #FF1E1E;
  --red-600: #E00C0C;
  --red-400: #FF5050;
  --red-glow: #FF1E1E;
  --red-dim: #7A0E0E;

  /* Cold cyan (live / performance) — no se usa en el EPK */
  --cyan-500: #00C8B4;
  --cyan-600: #00A797;
  --cyan-400: #2FE9D6;
  --cyan-dim: #07534C;

  --noise-warm: #1a0606;
  --noise-cold: #04181a;

  /* ===== SEMÁNTICOS ===== */
  --surface-base: var(--black);
  --surface-raised: var(--ink-900);
  --surface-card: var(--ink-800);
  --surface-panel: var(--ink-700);
  --surface-hover: var(--ink-600);
  --surface-inverse: var(--white);

  --text-primary: var(--white);
  --text-secondary: var(--ink-200);
  --text-tertiary: var(--ink-300);
  --text-disabled: var(--ink-400);
  --text-inverse: var(--black);
  --text-signal: var(--red-500);
  --text-live: var(--cyan-500);

  --border-faint: var(--ink-700);
  --border-default: var(--ink-600);
  --border-strong: var(--ink-500);
  --border-signal: var(--red-500);
  --border-live: var(--cyan-500);
  --hairline: 1px;

  --accent-identity: var(--red-500);
  --accent-identity-deep: var(--red-600);
  --accent-live: var(--cyan-500);
  --accent-live-deep: var(--cyan-600);
  --focus-ring: var(--red-500);

  /* ===== TIPOGRAFÍA ===== */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;
  --fw-display: 700;
  --fw-display-heavy: 900;

  --fs-micro: 11px;
  --fs-label: 13px;
  --fs-body: 15px;
  --fs-body-lg: 18px;
  --fs-h6: 20px;
  --fs-h5: 26px;
  --fs-h4: 34px;
  --fs-h3: 46px;
  --fs-h2: 64px;
  --fs-h1: 92px;
  --fs-mega: 148px;

  --lh-tight: 0.92;
  --lh-snug: 1.1;
  --lh-body: 1.55;
  --lh-data: 1.35;

  --ls-tightest: -0.03em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-widest: 0.22em;

  /* ===== ESPACIADO / RADII / LAYOUT ===== */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-10: 128px; --sp-11: 192px;

  --r-0: 0;
  --r-1: 2px;
  --r-pill: 999px;

  --container: 1280px;
  --container-narrow: 880px;
  --gutter: var(--sp-5);

  --bw-hair: 1px;
  --bw-mark: 2px;
  --bw-heavy: 4px;

  /* ===== EFECTOS ===== */
  --glow-red: 0 0 24px rgba(255,30,30,0.45), 0 0 2px rgba(255,30,30,0.9);
  --glow-red-soft: 0 0 40px rgba(255,30,30,0.25);
  --glow-cyan: 0 0 24px rgba(0,200,180,0.40), 0 0 2px rgba(0,200,180,0.9);
  --glow-cyan-soft: 0 0 40px rgba(0,200,180,0.22);
  --shadow-block: 8px 8px 0 var(--black-pure);
  --shadow-edge: 0 1px 0 rgba(0,0,0,0.8);
  --ease-mech: cubic-bezier(0.2, 0, 0, 1);
  --ease-step: steps(3, end);
  --dur-fast: 90ms;
  --dur-base: 160ms;
  --dur-slow: 320ms;
}

/* ===== BASE ELEMENT DEFAULTS ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--red-500); color: var(--black); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--text-primary);
}

a { color: inherit; text-decoration: none; }
code, kbd, samp { font-family: var(--font-mono); }
hr { border: none; border-top: var(--bw-hair) solid var(--border-default); margin: var(--sp-5) 0; }
:focus-visible { outline: var(--bw-mark) solid var(--focus-ring); outline-offset: 2px; }

.n0-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ===== TEXTURAS (scanlines / grain / glitch / datastream) ===== */
.n0-scanlines { position: relative; }
.n0-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.28) 3px, rgba(0,0,0,0) 4px
  );
  pointer-events: none; mix-blend-mode: multiply; z-index: 2;
}

.n0-glitch { position: relative; color: var(--white); }
.n0-glitch::before, .n0-glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  clip-path: inset(0 0 0 0); pointer-events: none;
}
.n0-glitch::before { color: var(--red-500); transform: translate(-2px, 0); mix-blend-mode: screen; animation: n0-glitch-x 2.6s var(--ease-step) infinite; }
.n0-glitch::after  { color: var(--cyan-500); transform: translate(2px, 0); mix-blend-mode: screen; animation: n0-glitch-x 3.1s var(--ease-step) reverse infinite; }
@keyframes n0-glitch-x {
  0%, 92%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  93% { transform: translate(-3px, 1px); clip-path: inset(20% 0 50% 0); }
  96% { transform: translate(3px, -1px); clip-path: inset(60% 0 10% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .n0-glitch::before, .n0-glitch::after { animation: none; }
}