/* ============================================================
   CVIP INTELLIGENCE — Design Tokens
   ============================================================
   Filosofía: "Ingeniería de flujos, no magia de IA" (ver DESIGN_BRIEF.md)
   Tono: serio, técnico, cálido en los detalles. Bordes en vez de
   sombras. Cifras en mono. Un solo acento (oro), nunca dos al mismo
   tiempo en la misma vista.

   ORIGEN: este archivo formaliza con nombres semánticos los valores
   que ya existen como variables "crudas" en styles.css (--ink, --gold,
   --teal, --paper, --line, etc.). Los mismos valores hexadecimales se
   mantienen; solo cambia el nombre con el que se referencian hacia
   adelante. Al final del archivo se re-declaran los nombres crudos
   como alias de los semánticos, así styles.css sigue funcionando sin
   tocarlo, mientras los componentes nuevos usan los nombres de abajo.

   DESVIACIÓN IMPORTANTE — Modo claro/oscuro:
   Este sitio NO tiene un theme toggle claro↔oscuro. El oscuro y el
   claro coexisten a propósito en la misma página: el hero y el footer
   son oscuros (impacto), el contenido es claro (credibilidad ante un
   comprador corporativo — ver Experience Principles del brief). Por
   eso este archivo no usa `[data-theme="dark"]` para alternar toda la
   página, sino que expone AMBAS superficies como tokens permanentes
   (`--color-bg-primary` y `--color-bg-inverse`), que cada sección
   elige vía clase (`.section-on-light` / `.section-on-dark`), no vía
   preferencia de usuario. Al final se incluye, de forma opcional y
   apagada por defecto, un bloque `prefers-color-scheme` por si en el
   futuro se quiere soportar un dark mode real de sistema — hoy no
   está conectado a ningún componente.
   ============================================================ */

:root {

  /* ===================== COLOR ===================== */

  /* Fondos */
  --color-bg-primary: #f5f6f8;      /* paper — superficie de lectura por defecto */
  --color-bg-secondary: #ffffff;    /* paper-raised — tarjetas sobre fondo claro */
  --color-bg-tertiary: #eef0f3;     /* pozo sutil para inputs/wells (extensión, aún no usado en styles.css) */
  --color-bg-inverse: #14171c;      /* ink — hero, footer, secciones de impacto */
  --color-bg-inverse-secondary: #1c2027; /* ink-soft — superficie secundaria sobre fondo oscuro (nodos del diagrama) */

  /* Texto */
  --color-text-primary: #1b1e24;    /* text-dark */
  --color-text-secondary: #5b6270;  /* text-muted */
  --color-text-tertiary: #8990a0;   /* extensión: placeholder/disabled, más claro que secondary */
  --color-text-inverse: #e9eaed;    /* text-light, sobre fondos oscuros */
  --color-text-inverse-secondary: #aab0bb; /* text-light-muted */
  --color-text-link: #d9a441;       /* el acento dorado hace de color de enlace; no hay azul separado */

  /* Bordes */
  --color-border-primary: #dde1e6;   /* line — bordes por defecto sobre fondo claro */
  --color-border-secondary: #e8eaed; /* extensión: divisor aún más sutil sobre claro */
  --color-border-inverse: #2b313b;   /* ink-line — bordes por defecto sobre fondo oscuro */
  --color-border-focus: #d9a441;     /* gold — igual al outline de :focus-visible ya en uso */

  /* Acento */
  --color-accent-primary: #d9a441;        /* gold */
  --color-accent-primary-hover: #f0cd86;  /* gold-soft */
  --color-accent-primary-active: #c4903a; /* extensión: estado "presionado", no definido aún en styles.css */
  --color-accent-secondary: #1f4b4d;       /* teal */
  --color-accent-secondary-hover: #2d6b6e; /* teal-soft */

  /* Estado */
  --color-status-success: #1f4b4d;  /* teal, igual a .form-status.ok */
  --color-status-warning: #c97a3d;  /* extensión: no hay estado de advertencia implementado aún */
  --color-status-error: #b3432f;    /* igual a .form-status.err */
  --color-status-info: #2d6b6e;     /* teal-soft */

  /* Overlay */
  --color-surface-overlay: rgba(20, 23, 28, 0.92); /* igual al fondo del header al hacer scroll */

  /* ===================== SPACING (base 8px) ===================== */
  /* Filosofía balanceada, no brutalista ni laxa — coherente con un
     sitio de consultoría que necesita orden, no decoración. */

  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;    /* = gap actual de .card-grid */
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;

  /* Nota de migración: hoy styles.css usa 104px/72px para el padding
     vertical de <section> y 56px para el gap de .hero-grid — valores
     ajustados a mano que no caen exactos en la escala. Al refactorizar,
     se recomienda mover 104px→96px (--space-11) y 72px→64px (--space-10),
     y 56px→48px (--space-9) o 64px (--space-10), para que todo el
     espaciado quede trazable a esta escala. */

  /* ===================== TYPOGRAPHY ===================== */

  --font-family-display: "Space Grotesk", sans-serif;
  --font-family-body: "IBM Plex Sans", sans-serif;
  --font-family-mono: "IBM Plex Mono", monospace;

  --font-size-xs: 11px;     /* etiquetas mono más pequeñas (flow-label) */
  --font-size-sm: 13px;     /* notas de formulario, labels de campo */
  --font-size-base: 16px;   /* cuerpo por defecto */
  --font-size-md: 18px;     /* lede / texto destacado */
  --font-size-lg: 19px;     /* h3 de tarjetas */
  --font-size-xl: 23px;     /* h3 de caso de éxito */
  --font-size-2xl: clamp(26px, 3vw, 36px);  /* h2 de sección */
  --font-size-3xl: clamp(30px, 4vw, 44px);  /* h1 de page-hero */
  --font-size-4xl: clamp(34px, 4.6vw, 56px); /* h1 de hero principal */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;     /* h1–h4 */
  --line-height-normal: 1.55;   /* cuerpo */
  --line-height-relaxed: 1.65;  /* extensión sugerida para lede/párrafos largos */

  --letter-spacing-tight: -0.01em; /* titulares */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.06em;   /* eyebrows, tags, etiquetas mono en mayúsculas */

  /* ===================== LAYOUT ===================== */

  --max-width-content: 640px;  /* ancho de lectura: section-head, lede */
  --max-width-wide: 1180px;    /* contenedor principal (.wrap) */
  --max-width-page: 1180px;    /* este proyecto no usa un ancho de página distinto al wide */

  --border-radius-sm: 2px;   /* etiqueta inline dentro de .example */
  --border-radius-md: 4px;   /* tarjetas, botones, inputs */
  --border-radius-lg: 8px;   /* extensión: reservado para superficies grandes futuras */
  --border-radius-full: 999px; /* selector de idioma (pill) */

  /* Esta paleta usa bordes, no sombras, para definir bordes de tarjetas
     y superficies — decisión deliberada de la dirección estética
     (sensación de plano técnico, no de tarjeta "flotante"). */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-focus: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent-primary);

  /* ===================== MOTION ===================== */

  --duration-instant: 50ms;
  --duration-fast: 150ms;    /* hover de botones y tarjetas */
  --duration-normal: 250ms;  /* transición de fondo del header al hacer scroll */
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-ambient: 3200ms; /* extensión: duración del pulso animado del diagrama SVG */

  --easing-default: ease;     /* hoy styles.css usa la palabra clave "ease", no un bezier propio */
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* no usado: este sistema evita el "bounce" a propósito */
  --easing-ambient: linear;   /* animación del pulso del flujo SVG */

  /* ===================== BREAKPOINTS (documentación) ===================== */
  /* Custom properties no son resueltas dentro de @media en la mayoría
     de navegadores sin un preprocesador o postcss-custom-media. Estos
     tokens documentan los valores reales usados en los @media de
     styles.css y sirven para mantenerlos consistentes o para usarlos
     desde JS con matchMedia(). */
  --breakpoint-xs: 540px;  /* filas de formulario pasan a 1 columna */
  --breakpoint-sm: 640px;  /* grids de tarjetas a 1 columna; padding de sección se reduce */
  --breakpoint-md: 760px;  /* case-card y team-grid a 1 columna */
  --breakpoint-lg: 860px;  /* navegación colapsa a menú móvil */
  --breakpoint-xl: 920px;  /* grids de 3 columnas pasan a 2 */
}

/* ============================================================
   Alias de compatibilidad con los nombres "crudos" de styles.css.
   Si este archivo se carga ANTES de styles.css, estas líneas no
   tienen efecto (styles.css redeclara sus propias variables).
   Si se carga DESPUÉS, mantiene a styles.css funcionando exactamente
   igual mientras el resto del sitio migra a los nombres semánticos.
   ============================================================ */
:root {
  --ink: var(--color-bg-inverse);
  --ink-soft: var(--color-bg-inverse-secondary);
  --ink-line: var(--color-border-inverse);
  --gold: var(--color-accent-primary);
  --gold-soft: var(--color-accent-primary-hover);
  --teal: var(--color-accent-secondary);
  --teal-soft: var(--color-accent-secondary-hover);
  --paper: var(--color-bg-primary);
  --paper-raised: var(--color-bg-secondary);
  --text-dark: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --text-light: var(--color-text-inverse);
  --text-light-muted: var(--color-text-inverse-secondary);
  --line: var(--color-border-primary);

  --font-display: var(--font-family-display);
  --font-body: var(--font-family-body);
  --font-mono: var(--font-family-mono);

  --max-width: var(--max-width-wide);
  --radius: var(--border-radius-md);
}

/* ============================================================
   Soporte opcional de dark mode de sistema — APAGADO por defecto.
   Ningún componente de este sitio lo consume hoy (ver nota de
   "Desviación importante" al inicio del archivo). Se deja preparado
   por si en el futuro se decide que TODO el sitio (no solo secciones
   puntuales) deba invertirse según la preferencia del sistema.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-bg-primary: #1c2027;
    --color-bg-secondary: #14171c;
    --color-text-primary: #e9eaed;
    --color-text-secondary: #aab0bb;
    --color-border-primary: #2b313b;
  }
}