/* fium · Design tokens
   Fuente de verdad: «FIUM Estrategia de marca», dirección creativa v2.
   Dos colores significan (naranja = fricción, azul = flujo); el resto descansa. */

:root {
  /* Marca */
  --tinta: #0A0B0F;
  --hueso: #EFEDE6;
  --flujo: #3B5BFF;
  --friccion: #FF5A1F;
  --neblina: #8FA3FF;
  --papel: #FBFAF6;
  --tiza: #D6D2C8;
  --muted: #66645F;
  --blanco: #FFFFFF;

  /* Derivados definidos en el brief */
  --friccion-texto: #C23A08;   /* naranja legible sobre fondos claros */
  --friccion-suave: #FFE3D6;   /* fondo de la fila o celda con problema */
  --tinta-superficie: #16181F; /* superficie en oscuro */
  --tinta-borde: #2A2D36;      /* borde en oscuro */
  --tinta-muted: #8E8B84;      /* texto secundario en oscuro */

  /* Tipografía */
  --font-display: "Bricolage Grotesque", "Geist", system-ui, Arial, sans-serif;
  --font-body: "Geist", system-ui, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-label: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-statement: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --text-h2: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --text-service: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --text-display: clamp(2.5rem, 1rem + 4.6vw, 3.75rem);
  --text-number: clamp(5rem, 3rem + 9vw, 9rem);
  --text-giant: clamp(3rem, 1rem + 9.5vw, 9rem);

  --leading-display: 1.03;
  --leading-heading: 1.1;
  --leading-body: 1.5;
  --leading-label: 1.3;

  --tracking-display: -0.03em;
  --tracking-number: -0.05em;
  --tracking-wordmark: -0.05em;
  --tracking-label: 0.08em;

  /* Espaciado: módulo de 8 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Retícula y anchos */
  --content-max: 80rem;                 /* 1280 px */
  --margin: clamp(1.5rem, 6vw, 5rem);   /* 24 px en móvil, 80 px en escritorio */
  --gutter: 1.5rem;
  --section-y: clamp(6rem, 12vw, 10rem); /* 96 px en móvil, 160 px en escritorio */
  --measure: 56ch;
  --header-h: 3.5rem;

  /* Bordes y esquinas: solo 6, 14 y 99 px */
  --border: 1px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 99px;

  /* Única sombra permitida: pantallas «levantadas» sobre el fondo */
  --shadow-screen: 0 24px 40px -24px rgba(10, 11, 15, 0.35);

  /* El Trazo */
  --trazo-w: 6px;
  --trazo-h: 56px;

  /* Movimiento: de tenso a suelto, sin rebotes */
  --ease-cauce: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-nudo: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-micro: 160ms;
  --dur-hover: 200ms;
  --dur-ui: 280ms;
  --dur-narrative: 600ms;
  --dur-trazo: 700ms;
  --stagger: 60ms;
}

/* Puntos de corte (las custom properties no sirven en @media; se documentan aquí):
   600 px  → móvil grande
   900 px  → navegación de escritorio y rejillas de varias columnas
   1024 px → hero y contacto a dos columnas */

@media (min-width: 900px) {
  :root {
    --header-h: 4rem;
  }
}

@media (min-width: 1024px) {
  :root {
    /* El titular del hero ocupa 7 de 12 columnas: escala con el ancho para caer en tres líneas */
    --text-display: min(5.2vw, 4.75rem);
  }
}

/* Temas de sección: tinta, hueso y un único bloque azul */
.theme-hueso {
  --bg: var(--hueso);
  --fg: var(--tinta);
  --fg-muted: var(--muted);
  --line: var(--tiza);
  --surface: var(--papel);
  --accent: var(--flujo);
  --problem: var(--friccion-texto);
  --focus: var(--flujo);
}

.theme-tinta {
  --bg: var(--tinta);
  --fg: var(--hueso);
  --fg-muted: var(--tinta-muted);
  --line: var(--tinta-borde);
  --surface: var(--tinta-superficie);
  --accent: var(--neblina);
  --problem: var(--friccion);
  --focus: var(--neblina);
}

.theme-flujo {
  --bg: var(--flujo);
  --fg: var(--blanco);
  --fg-muted: var(--blanco);
  --line: var(--neblina);
  --surface: var(--papel);
  --accent: var(--blanco);
  --problem: var(--blanco); /* nunca naranja sobre azul */
  --focus: var(--blanco);
}