/* Dale Technology · tokens. Estructura heredada del sistema del sitio; valores de la marca Dale. */
:root {
  /* Paleta de Dale (dale-site-v3/app/globals.css): papel cálido, tinta y un solo acento cobre.
     Los nombres de las variables se quedan para no reescribir el sistema; los valores son de Dale. */
  --crema: #FBF8F3;               /* papel */
  --tinta: #1A1714;               /* tinta */
  --oliva: #9E4A15;               /* cobre hondo: etiquetas y números, 5,5:1 sobre el papel */
  --arena: #E8E1D6;               /* línea y superficie arena */
  --borgona: #B5561A;             /* cobre de Dale: acción, foco y enlaces al pasar */

  /* Derivados medidos */
  --tinta-hover: #9E4A15;         /* botón principal :hover */
  --tinta-suave: rgba(26, 23, 20, .06);
  --tinta-linea: rgba(26, 23, 20, .16);
  --tinta-borde: rgba(26, 23, 20, .36);
  --texto-apoyo: #5F574E;          /* 6,9:1 sobre el papel */
  --crema-panel: #F3EDE4;          /* papel levantado para paneles */
  --cuarto: #14110D;               /* el cuarto oscuro de Dale Agents */
  --cobre-claro: #F09B5C;          /* cobre sobre fondo oscuro */

  /* Semántica */
  --fondo: var(--crema);
  --texto: var(--tinta);
  --accion-fondo: var(--borgona);
  --accion-texto: #FFFFFF;
  --acento: var(--oliva);
  --superficie: var(--arena);
  --foco-claro: var(--borgona);
  --foco-oscuro: var(--cobre-claro);
  --error: #B8402F;

  /* Tipografía (manual §5) */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", Arial, sans-serif;
  --t-hero: clamp(44px, 2.75rem + 2.4vw, 72px);
  --t-seccion: clamp(34px, 2.125rem + 1.2vw, 48px);
  --t-sub: clamp(22px, 1.375rem + .2vw, 24px);
  --t-cuerpo: clamp(16px, 1rem + .18vw, 18px);
  --t-control: 15px;
  --t-apoyo: 13px;
  --lh-hero: 1.06;
  --lh-seccion: 1.12;
  --lh-sub: 1.3;
  --lh-cuerpo: 1.6;
  --lh-control: 1.4;
  --lh-apoyo: 1.5;
  --track-display: -0.035em;

  /* Espacio (4, 8, 12, 16, 24, 32, 48, 64, 96) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --contenedor: 1200px;
  --margen: 24px;
  --seccion: 56px;

  /* Forma e interacción */
  --radio-control: 12px;
  --radio-superficie: 20px;
  --objetivo: 44px;
  --foco-ancho: 3px;
  --foco-sep: 3px;
  --dur: 200ms;
  --curva: cubic-bezier(.16, 1, .3, 1);   /* salida exponencial, arranque visible */
}
@media (min-width: 768px) {
  :root { --margen: clamp(24px, 6vw, 64px); --seccion: clamp(56px, 8vw, 96px); }
}