/* Tokens de 3D Volumen. Nombres de Forest (--fr-*) para poder conectarlo a una marca `3dvolumen` después.
   Idea visual: taller técnico. Papel de plano, tinta, filamento naranja, cama de impresión oscura, cotas en mono. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fuentes/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fuentes/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800; font-display: swap;
}

:root {
  /* Color */
  --fr-color-bg: #f1efea;          /* papel de plano */
  --fr-color-bg-sunken: #e8e5de;
  --fr-color-surface: #ffffff;
  --fr-color-ink: #141414;
  --fr-color-ink-muted: #5e5b55;
  --fr-color-line: #d9d5cc;
  --fr-color-line-strong: #b9b4a9;
  --fr-color-accent: #ff4f1a;      /* filamento */
  --fr-color-accent-soft: #ffe1d6;
  --fr-color-measure: #2b5bff;     /* cotas */
  --fr-color-bed: #1b1c1e;         /* cama de impresión */
  --fr-color-bed-line: #2e2f33;
  --fr-color-on-bed: #f1efea;
  --fr-color-on-bed-muted: rgb(241 239 234 / 0.62);
  --fr-color-success: #1f9d55;

  /* Tipografía */
  --fr-font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --fr-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --fr-text-xs: 0.75rem;
  --fr-text-sm: 0.875rem;
  --fr-text-md: 1rem;
  --fr-text-lg: 1.1875rem;
  --fr-text-xl: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
  --fr-text-2xl: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --fr-text-display: clamp(2.6rem, 1.2rem + 6vw, 6.2rem);
  --fr-leading-tight: 0.98;
  --fr-leading-body: 1.55;
  --fr-tracking-display: -0.035em;
  --fr-tracking-label: 0.08em;

  /* Espacio (base 4) */
  --fr-space-1: 4px;  --fr-space-2: 8px;  --fr-space-3: 12px; --fr-space-4: 16px;
  --fr-space-5: 20px; --fr-space-6: 24px; --fr-space-8: 32px; --fr-space-10: 40px;
  --fr-space-12: 48px; --fr-space-16: 64px; --fr-space-20: 80px; --fr-space-24: 96px;
  --fr-section: clamp(64px, 5vw + 40px, 128px);
  --fr-gutter: clamp(16px, 3vw, 40px);
  --fr-max: 1320px;
  --fr-header-h: 68px;

  /* Forma */
  --fr-radius-sm: 6px;
  --fr-radius-md: 10px;
  --fr-radius-lg: 18px;
  --fr-radius-pill: 999px;
  --fr-border: 1px solid var(--fr-color-line);

  /* Retícula de 10 mm (tapete de corte) */
  --fr-grid-size: 40px;
  --fr-grid-line: rgb(20 20 20 / 0.055);

  /* Movimiento */
  --fr-ease: cubic-bezier(.2, .7, .1, 1);
  --fr-duration: 420ms;
}