/* ==========================================================================
   TECVIA · tokens.css
   Sistema de tokens. Todo valor de diseño vive aquí y en ningún otro lado.
   Si vas a ajustar algo global, ajústalo aquí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía — instancias estáticas, subseteadas a latin + español.
   Total de las 5 caras: 59.2 KB. No son fuentes variables: animar
   font-variation-settings dispara paint en cada frame.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo Exp';
  src: url('../fonts/archivo-expanded-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrumentsans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrumentsans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Cond';
  src: url('../fonts/martianmono-cond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Cond';
  src: url('../fonts/martianmono-cond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens globales (no dependen del tema)
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark light;

  /* --- Familias --- */
  --font-display: 'Archivo Exp', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Martian Cond', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Escala tipográfica (fluida) --- */
  /* Calibrado midiendo en el navegador: a 5.4rem cada línea escrita del h1
     se partía en dos y el pie del hero se salía del viewport. */
  --fs-display-xl: clamp(2.5rem, 1.9rem + 2.48vw, 4.15rem);
  --fs-display-l: clamp(2rem, 1.55rem + 1.9vw, 3.2rem);
  --fs-display-s: clamp(1.5rem, 1.3rem + 0.85vw, 2rem);
  --fs-title: clamp(1.15rem, 1.08rem + 0.3vw, 1.375rem);
  --fs-body-l: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --fs-body: 1.0625rem; /* 17px */
  --fs-small: 0.9375rem; /* 15px */
  --fs-mono-label: 0.75rem; /* 12px */
  --fs-mono-data: 0.8125rem; /* 13px */

  --lh-display: 0.96;
  --lh-title: 1.25;
  --lh-body: 1.6;
  --lh-mono: 1.45;

  --ls-display: -0.02em;
  --ls-title: -0.01em;
  --ls-mono: 0.08em;

  /* --- Espaciado (base 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Ritmo vertical de sección — fluido */
  --sp-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* --- Layout --- */
  --w-max: 1240px;
  --w-prose: 62ch;
  --rail-w: 60px; /* riel de elevación de rack, sólo ≥1080px */
  --nav-h: 68px;
  --gutter: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem);

  /* --- Radios: casi cero. Esto es equipo, no una app. --- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* --- Bordes --- */
  --bw-hair: 1px;

  /* --- Curvas de easing (custom, ninguna default del navegador) --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hw: cubic-bezier(0.16, 1, 0.3, 1); /* los movimientos "pesados" */

  /* --- Duraciones --- */
  --d-press: 140ms; /* feedback de botón */
  --d-micro: 220ms; /* micro-interacción */
  --d-hover: 260ms; /* hover coordinado */
  --d-ui: 300ms; /* techo de UI */
  --d-reveal: 560ms; /* reveal de scroll (motion explicativo, no UI) */

  /* --- Capas --- */
  --z-trace: 0;
  --z-content: 1;
  /* La traza va sobre el contenido para no perderse bajo la sección
     pinneada del Proceso, pero por debajo del riel y del nav. */
  --z-trace-over: 15;
  --z-rail: 20;
  --z-nav: 40;
  --z-fab: 50;
  --z-skip: 60;
}

/* --------------------------------------------------------------------------
   3. Tema oscuro — el modo principal
   El cuarto de telecom a las 2am: grafito frío, herraje de cobre,
   LEDs verdes de enlace.
   -------------------------------------------------------------------------- */

:root,
[data-theme='dark'] {
  /* Base */
  --c-bg: #0b1016; /* Grafito — no es negro puro, a propósito */
  --c-surface: #141b24; /* Rack — acero con pintura electrostática */
  --c-surface-2: #1b2430; /* Rack elevado */

  /* Texto */
  --c-text: #e8edf2; /* Cal        16.21:1 */
  --c-text-muted: #8a97a6; /* Etiqueta    6.42:1 */
  --c-text-faint: #7a8492; /* 3er nivel    5.04:1 — medido, no estimado */

  /* Acentos */
  --c-copper: #c08a4e; /* Cobre       6.35:1 */
  --c-copper-hi: #d9a468; /* cobre iluminado (hover, pulso) */
  --c-copper-dim: rgba(192, 138, 78, 0.22);
  --c-signal: #5ee6c4; /* Señal      12.36:1 — SÓLO estado */
  --c-signal-dim: rgba(94, 230, 196, 0.28);

  /* Estructura */
  --c-line: rgba(232, 237, 242, 0.11);
  --c-line-strong: rgba(232, 237, 242, 0.2);
  --c-focus: #5ee6c4;

  /* Botones */
  --c-btn-fg: #0b1016;
  --c-scrim: rgba(11, 16, 22, 0.72);

  /* Logo */
  --c-logo-structure: #e8edf2;
  --c-logo-copper: #c08a4e;

  --shadow-lift: 0 1px 0 rgba(232, 237, 242, 0.05);
}

/* --------------------------------------------------------------------------
   4. Tema claro — secundario, pero real.
   Los acentos NO son el mismo token con opacidad: son valores propios.
   Un acento que funciona en oscuro casi nunca funciona en claro.
   -------------------------------------------------------------------------- */

[data-theme='light'] {
  color-scheme: light;

  --c-bg: #e8edf2; /* Cal, ahora como fondo */
  --c-surface: #ffffff;
  --c-surface-2: #f4f7fa;

  --c-text: #0b1016; /* Grafito     16.21:1 */
  --c-text-muted: #4d5966; /*             6.07:1 */
  --c-text-faint: #5f6975; /*             4.74:1 — el #8a97a6 anterior daba 2.53 y lo estaba usando en texto real */

  --c-copper: #8a5a28; /*             4.99:1 sobre Cal */
  --c-copper-hi: #6f4720;
  --c-copper-dim: rgba(138, 90, 40, 0.2);
  --c-signal: #0d7059; /*             5.12:1 — el #0f7a63 daba 4.47 y no pasaba AA */
  --c-signal-dim: rgba(13, 112, 89, 0.22);

  --c-line: rgba(11, 16, 22, 0.13);
  --c-line-strong: rgba(11, 16, 22, 0.24);
  --c-focus: #0d7059;

  --c-btn-fg: #ffffff;
  --c-scrim: rgba(232, 237, 242, 0.75);

  --c-logo-structure: #0b1016;
  --c-logo-copper: #8a5a28;

  --shadow-lift: 0 1px 0 rgba(11, 16, 22, 0.05);
}

/* El tema SIEMPRE queda explícito en data-theme: el script inline del <head>
   resuelve la preferencia del sistema antes del primer pintado.
   Así no hay que duplicar los valores de claro en una media query — que fue
   exactamente el bug que hizo que el hero se pintara con texto oscuro sobre
   el degradado oscuro. Una sola fuente de verdad. */