/* 400Needles · tokens de diseño (v1.0), solo tema claro. Fuente: brand/manual/tokens/tokens.json. */

:root {
  /* color · modo claro */
  --n4-papel: #F6F1E7;
  --n4-papel-claro: #FBF8F1;
  --n4-tinta: #1E1A16;
  --n4-texto-sec: #5F574B;
  --n4-ocre: #8C6200;
  --n4-arena: #D8CBB2;
  --n4-sobre-ocre: #FFFFFF;
  --n4-correcto: #2F6B3A;
  --n4-error: #A3321F;
  --n4-info: #2F5A7A;
  /* logotipo (se cambian juntos en negativo) */
  --n4-logo-tinta: var(--n4-tinta);
  --n4-logo-acento: #8C6200;

  /* tipografía */
  --n4-fuente: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --n4-fuente-datos: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --n4-display: 760 clamp(40px, 6vw, 72px)/1.02 var(--n4-fuente);   /* font-stretch: 118% */
  --n4-titulo-1: 760 clamp(32px, 4.2vw, 52px)/1.04 var(--n4-fuente);/* font-stretch: 118% */
  --n4-titulo-2: 680 26px/1.15 var(--n4-fuente);                     /* font-stretch: 112% */
  --n4-titulo-3: 680 20px/1.25 var(--n4-fuente);                     /* font-stretch: 112% */
  --n4-entradilla: 420 19px/1.55 var(--n4-fuente);
  --n4-texto: 420 16px/1.6 var(--n4-fuente);
  --n4-etiqueta: 420 12px/1.3 var(--n4-fuente-datos);                 /* MAYÚSCULAS, letter-spacing .08em, font-stretch 87% */

  /* espacio y forma */
  --n4-e1: 4px; --n4-e2: 8px; --n4-e3: 12px; --n4-e4: 16px; --n4-e5: 24px; --n4-e6: 32px; --n4-e7: 48px; --n4-e8: 64px; --n4-e9: 96px;
  --n4-ancho: 1180px;
  --n4-corte: 22px;      /* corte de orientación de la tarjeta */
  --n4-radio: 14px;      /* las otras tres esquinas */
  --n4-borde: 2px;
  --n4-tarjeta: polygon(var(--n4-corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--n4-corte));

  /* movimiento */
  --n4-salida: cubic-bezier(.2,.75,.25,1);
  --n4-seca: cubic-bezier(.85,0,.15,1);
  --n4-rebote: cubic-bezier(.34,1.56,.64,1);
  --n4-entrada-salida: cubic-bezier(.7,0,.3,1);
}

/* Componentes base */
.n4-tarjeta { clip-path: var(--n4-tarjeta); border-radius: 0 var(--n4-radio) var(--n4-radio) var(--n4-radio); background: var(--n4-tinta); padding: var(--n4-borde); }
.n4-tarjeta > * { clip-path: polygon(calc(var(--n4-corte) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--n4-corte) - 1px)); border-radius: 0 calc(var(--n4-radio) - 2px) calc(var(--n4-radio) - 2px) calc(var(--n4-radio) - 2px); background: var(--n4-papel-claro); height: 100%; }
.n4-boton { display: inline-flex; align-items: center; gap: 10px; font: 620 14px/1 var(--n4-fuente); padding: 13px 18px; border: var(--n4-borde) solid var(--n4-tinta); color: var(--n4-tinta); background: transparent; text-decoration: none; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.n4-boton--principal { background: var(--n4-ocre); border-color: var(--n4-ocre); color: var(--n4-sobre-ocre); }
.n4-etiqueta { font: var(--n4-etiqueta); text-transform: uppercase; letter-spacing: .08em; font-stretch: 87%; color: var(--n4-texto-sec); }
/* Logotipo inline (SVG del kit): los colores salen de los tokens */
.n4-logo .part.four path, .n4-logo .part.b path, .n4-logo .wm path { fill: var(--n4-logo-tinta); }
.n4-logo .part.a path { fill: var(--n4-logo-acento); }
.n4-logo .part.x path[stroke] { stroke: var(--n4-logo-tinta); }
.n4-logo .part.x path:not([stroke]) { fill: var(--n4-logo-tinta); }