/* =============================================================================
   volcado.studio — tokens.css
   Identidad mínima viable, v1.2 · 19.09.2026

   CHANGELOG v1.2 (maquetación de la web, paso 1)
   1. Añadido --bw-1 (grosor de borde y filete). El borde de los campos y de
      .on-dark .card pasa de 1px literal a var(--bw-1).
   2. Añadido --col-min (ancho mínimo de columna en rejillas auto-fit). Permite
      maquetar sin @media: no hay tokens de breakpoint y no se añaden.

   CHANGELOG v1.1 (revisión externa sobre v1.0)
   1. Corregido el ratio documentado de warn/warn-soft: 5,55:1, no 5,19:1.
   2. Foco: --sh-focus tokenizado y añadidos --acc-focus-on-dark y --sh-focus-on-dark;
      el anillo ya no usa --acc dentro de .on-dark (era 2,31:1, incumplía 1.4.11).
   3. Enlaces: subrayado en texto corrido; el color deja de ser la única señal (1.4.1).
   4. --measure pasa de p/li a la clase .prose, para no colarse en tarjetas y tablas.
   5. Añadidos --line-on-dark y --ink-2-on-dark (derivados de --paper, no colores nuevos)
      y prohibidos explícitamente --acc-on-dark, --warn-on-dark y --ink-2 sobre claro/oscuro.
   6. Añadida al documento de identidad la tabla de hex literales para correo: única excepción.
   -----------------------------------------------------------------------------
   Fuente única de verdad. Si un valor de la web, de una propuesta o de un
   componente no coincide con este archivo, manda este archivo.
   Excepción única y autorizada: la firma de correo, que va en hex literal y
   con estilos en línea porque Outlook no soporta variables CSS. La tabla de
   equivalencias está en el documento de identidad, apartado 05.

   Regla de uso: en el CSS de producto NO se escriben colores, tamaños ni
   espacios literales. Siempre var(--token). Si hace falta un valor que no
   está aquí, se añade aquí primero.

   Ratios de contraste anotados = WCAG 2.2, calculados sobre estos valores.
   AA exige 4,5:1 en texto normal, 3:1 en texto grande (≥24px, o ≥18,66px en
   negrita) y 3:1 en componentes de interfaz e indicadores de foco (1.4.11).
============================================================================= */

:root{

  /* ---------------------------------------------------------------------
     1. COLOR
     Base cálida de papel: el producto acaba impreso, el blanco puro es de
     interfaz de software. Un solo acento (con dos tonos por claridad, ver
     nota) y un color de aviso para incidencias.
     El verde es un FONDO, no un segundo acento.

     CADA TOKEN TIENE UN CONTEXTO. Los de claro y los de oscuro no son
     intercambiables en ninguna dirección; ver el bloque CONTEXTOS al final
     de esta sección.
  --------------------------------------------------------------------- */

  /* Superficies */
  --paper:    #F8F3EA;   /* oklch(96.6% 0.013 82.4) — fondo por defecto        */
  --paper-2:  #EFE7DA;   /* oklch(93.1% 0.019 80.1) — bloques y tablas         */
  --paper-3:  #FFFFFF;   /* blanco puro: solo tarjetas sobre paper-2 y PDF     */
  --verde:    #143129;   /* oklch(28.8% 0.038 173.3) — bloque oscuro, inverso  */

  /* Texto sobre claro */
  --ink:      #1A1614;   /* oklch(20.4% 0.008 48.3)                            */
  --ink-2:    #5C5248;   /* oklch(44.5% 0.021 67.3) — notas, pies, metadatos   */
                         /* también el borde de los campos de formulario       */

  /* Texto secundario sobre oscuro. Derivado de --paper con alfa, no es un
     color nuevo. --ink-2 sobre --verde da 1,84:1: PROHIBIDO. */
  --ink-2-on-dark: rgba(248,243,234,.76);  /* ≈ #C1C4BC sobre --verde → 7,92:1 */

  /* Filetes */
  --line:         #DCD2C1;                 /* oklch(86.7% 0.026 81.1)          */
  --line-on-dark: rgba(248,243,234,.20);   /* ≈ #425850 sobre --verde → 1,83:1 */
  /* OJO: --line da 1,35:1 sobre --paper y --line-on-dark 1,83:1 sobre --verde.
     Los dos son DECORATIVOS. Nunca son el único borde de un control de
     formulario ni separan información crítica: para eso, --ink-2 sobre claro.
     Y --line sobre --verde da 9,35:1, un filete que grita: en oscuro va
     siempre --line-on-dark. */

  /* Acento — un solo matiz (≈34° en OKLCH), dos claridades.
     No es un capricho: con base de papel (luminancia 0,90) ningún color
     único llega a 4,5:1 sobre claro Y sobre oscuro a la vez. Sobre papel
     necesitaría luminancia ≤0,161; sobre fondo oscuro, ≥0,265. */
  --acc:         #B8300E; /* oklch(51.8% 0.178 34.0) — SOLO sobre claro       */
  --acc-hover:   #9C280B; /* estado activo de botón, SOLO sobre claro         */
  --acc-on-dark: #F2957A; /* oklch(76.0% 0.119 37.0) — SOLO sobre --verde     */
  --acc-soft:    #F6E3DA; /* oklch(92.9% 0.024 47.1) — superficie clara       */

  /* Aviso — incidencias del volcado: campos vacíos, textos que se salen */
  --warn:         #845605; /* oklch(49.2% 0.103 72.7) — SOLO sobre claro      */
  --warn-on-dark: #F2C14E; /* oklch(83.4% 0.141 85.4) — SOLO sobre --verde    */
  --warn-soft:    #FBEFD4; /* oklch(95.5% 0.038 86.9) — superficie clara      */

  /* Foco. Tokenizado: ninguna regla escribe el rgba a mano. */
  --acc-focus:         var(--acc);           /* anillo sobre claro  → 5,48:1  */
  --acc-focus-on-dark: var(--acc-on-dark);   /* anillo sobre verde  → 6,23:1  */
  --sh-focus:          0 0 0 3px rgba(184,48,14,.32);   /* halo sobre claro   */
  --sh-focus-on-dark:  0 0 0 3px rgba(242,149,122,.38); /* halo sobre oscuro  */

  /* --- PARES VERIFICADOS (ratio real, WCAG 2.2) ------------------------
     ink/paper 16,26 · ink/paper-2 14,64 · ink-2/paper 6,90 · ink-2/paper-2 6,21
     acc/paper 5,48 · acc/paper-2 4,94 · acc/blanco 6,06 · paper/acc 5,48
     paper/acc-hover 6,98 · ink/acc-soft 14,48 · acc/acc-soft 4,88
     paper/verde 12,66 · acc-on-dark/verde 6,23 · ink-2-on-dark/verde 7,92
     warn/paper 5,73 · warn/paper-2 5,16 · warn/warn-soft 5,55 [corregido en v1.1]
     warn-on-dark/verde 8,34

     --- PROHIBIDOS (medidos, no estimados) -------------------------------
     acc / verde .............. 2,31  → por esto el logotipo en inverso va a una tinta
     acc-on-dark / paper ...... 2,03  → NO es "un tono suave del acento". Sobre
                                        cualquier fondo claro es ilegible: paper-2
                                        1,83 y blanco 2,24. Si lo que se busca es
                                        un acento suave sobre claro, es --acc-soft
                                        como fondo con --ink o --acc encima.
     warn-on-dark / paper ..... 1,52  → mismo caso que el anterior.
     ink-2 / verde ............ 1,84  → texto secundario en oscuro: --ink-2-on-dark
     ink / acc ................ 2,97  → un anillo de foco dibujado ENCIMA del botón
                                        de acento no cumple. El anillo siempre con
                                        outline-offset: el hueco de --paper es lo
                                        que aporta el contraste.

     --- DECORATIVOS (no transmiten información) --------------------------
     line/paper 1,35 · line-on-dark/verde 1,83
  --------------------------------------------------------------------- */


  /* ---------------------------------------------------------------------
     2. TIPOGRAFÍA
     Dos familias, las dos SIL OFL 1.1, autoalojadas en WOFF2 variable con
     subset latin + latin-ext.
     latin-ext NO es opcional: la ela geminada catalana (ŀ, U+0140) vive ahí.
     La monoespaciada es la del sistema y no forma parte de la identidad:
     solo para código y rutas de archivo.
     En correo no hay fuentes de marca: ver la tabla del apartado 05 del
     documento de identidad.
  --------------------------------------------------------------------- */
  --font-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text:"Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;   /* titulares y logotipo */

  /* Escala modular, razón ≈1,25. Cuerpo 17→18px. */
  --fs--2:0.8125rem;                                          /* 13px  antetítulos, pies de tabla */
  --fs--1:clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);       /* 14→15 notas, metadatos           */
  --fs-0: clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);       /* 17→18 CUERPO DE TEXTO            */
  --fs-1: clamp(1.25rem, 1.19rem + 0.3vw, 1.375rem);          /* 20→22 entradilla, h3             */
  --fs-2: clamp(1.5rem, 1.38rem + 0.6vw, 1.75rem);            /* 24→28 h3 grande                  */
  --fs-3: clamp(1.875rem, 1.65rem + 1.1vw, 2.25rem);          /* 30→36 h2                         */
  --fs-4: clamp(2.25rem, 1.8rem + 2.2vw, 3rem);               /* 36→48 h1                         */
  --fs-5: clamp(2.75rem, 2rem + 3.6vw, 4rem);                 /* 44→64 titular de portada         */

  --lh-title:1.06;   /* --fs-4 y --fs-5 */
  --lh-tight:1.2;    /* --fs-1 a --fs-3 */
  --lh-body:1.6;     /* cuerpo          */

  --tr-display:-0.02em;   /* titulares en display    */
  --tr-logo:-0.012em;     /* solo logotipo: −12/1000 em en "Volcado" */
  --tr-eyebrow:0.14em;    /* antetítulos en versalita falsa (uppercase) */

  /* Medida de línea. Se aplica con la clase .prose, NUNCA al elemento p o li:
     en una tarjeta, una celda o un pie de formulario la medida la manda el
     contenedor, y max-width en el elemento obliga a parchear con excepciones. */
  --measure:68ch;         /* 60-75 caracteres con Source Sans 3 a 17px */

  /* Enlaces: el color no es señal suficiente (1.4.1), porque --acc contra
     --ink no llega a 3:1. En texto corrido, subrayado siempre. */
  --link-underline-offset:0.18em;
  --link-underline-thickness:0.06em;

  /* Cifras. Source Sans 3 ya es tabular por defecto (ofrece pnum para lo
     contrario); Source Serif 4 NO, hay que pedírselo. Aplica --num-tabular
     a cualquier titular en display que lleve un precio o una fecha. */
  --num-tabular:tabular-nums lining-nums;   /* font-variant-numeric */


  /* ---------------------------------------------------------------------
     3. ESPACIADO — base 8px. --s-1 (4px) es la única mitad permitida.
  --------------------------------------------------------------------- */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;    /* separación entre secciones */
  --s-10:128px;

  --wrap:1120px;         /* ancho máximo de contenedor */
  --gutter:var(--s-5);

  /* v1.2. Ancho mínimo de columna para rejillas sin @media:
       grid-template-columns:repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
     22rem (352px) hace que cuatro tarjetas caigan en 2×2 dentro de --wrap y
     que en 360px de pantalla la rejilla sea de una columna. */
  --col-min:22rem;

  /* v1.2. Grosor de borde y de filete. */
  --bw-1:1px;


  /* ---------------------------------------------------------------------
     4. RADIOS — taller técnico, no aplicación de móvil. Nada redondo.
  --------------------------------------------------------------------- */
  --r-1:2px;      /* etiquetas, code   */
  --r-2:4px;      /* botones, inputs   */
  --r-3:8px;      /* tarjetas, bloques */
  --r-pill:999px; /* solo para contadores numéricos */


  /* ---------------------------------------------------------------------
     5. SOMBRAS — cálidas (derivadas de --ink), nunca negro puro.
        Como mucho dos niveles en la misma pantalla.
        Son tokens de CONTEXTO CLARO: sobre --verde no se ven. En oscuro la
        separación se hace con --line-on-dark o con un cambio de superficie,
        no con sombra.
  --------------------------------------------------------------------- */
  --sh-1:0 1px 2px rgba(26,22,20,.07);
  --sh-2:0 10px 28px -16px rgba(26,22,20,.30);


  /* ---------------------------------------------------------------------
     6. MOVIMIENTO — corto y sin rebote. Nada dura más de 360ms.
  --------------------------------------------------------------------- */
  --t-fast:120ms;
  --t-base:200ms;
  --t-slow:360ms;
  --ease:cubic-bezier(.2,.7,.3,1);


  /* ---------------------------------------------------------------------
     7. LOGOTIPO — constantes de maquetación
  --------------------------------------------------------------------- */
  --logo-ratio:8.38;      /* horizontal: ancho / alto                        */
  --logo-min-width:140px; /* por debajo, versión compacta                    */
  --logo-clearspace:1em;  /* = altura de la V (670/1000 em del cuerpo usado) */

  /* La identidad es papel: no hay modo oscuro. El bloque oscuro (--verde) es
     una sección, no un tema. */
  color-scheme:light;
}

/* No invertimos la paleta cuando el sistema pide modo oscuro: el fondo papel
   es parte de la marca. Se declara explícitamente para que ningún navegador
   ni cliente de correo lo decida por su cuenta. */
@media (prefers-color-scheme: dark){
  :root{ color-scheme:light; }
  body{ background:var(--paper); color:var(--ink); }
}

/* =============================================================================
   Base mínima. Todo lo demás es del producto, no de la identidad.
============================================================================= */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--fs-0);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--tr-display);
  line-height:var(--lh-tight);
}
h1{ font-size:var(--fs-4); line-height:var(--lh-title); }
h2{ font-size:var(--fs-3); }
h3{ font-size:var(--fs-1); }

/* -----------------------------------------------------------------------------
   Medida de línea: contenedor de texto corrido, no elemento.
   .prose envuelve artículos, respuestas de FAQ, cuerpo de propuesta.
   En tarjetas, celdas y pies NO se usa: ahí manda el ancho del contenedor.
----------------------------------------------------------------------------- */
.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:var(--s-4); }

/* -----------------------------------------------------------------------------
   Enlaces. El color solo no basta (1.4.1): --acc contra --ink no llega a 3:1.
   Subrayado por defecto; se quita explícitamente donde la forma ya dice que
   es pulsable (navegación, botones, tarjetas enteras enlazadas).
----------------------------------------------------------------------------- */
a{
  color:var(--acc);
  text-decoration:underline;
  text-underline-offset:var(--link-underline-offset);
  text-decoration-thickness:var(--link-underline-thickness);
}
a:hover{ text-decoration-thickness:calc(var(--link-underline-thickness) * 2); }

nav a,
.btn,
a.no-underline{ text-decoration:none; }
nav a:hover{ text-decoration:underline; text-underline-offset:var(--link-underline-offset); }

/* -----------------------------------------------------------------------------
   Foco. Contexto claro por defecto; el bloque oscuro lo redefine más abajo.
   El outline-offset no es decorativo: el hueco de fondo es lo que da el
   contraste cuando el control ya está relleno de --acc (ink/acc = 2,97).
----------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--acc-focus);
  outline-offset:2px;
  box-shadow:var(--sh-focus);
}
/* Controles rellenos de acento: el anillo cambia a tinta para no fundirse con
   el propio botón. El contraste lo aporta el hueco de --paper del offset. */
.btn:focus-visible,
[data-surface="acc"] :focus-visible{
  outline-color:var(--ink);
}

/* Cualquier cifra alineada en columna: precios, EAN, fechas, referencias. */
.num, table td, table th{ font-variant-numeric:var(--num-tabular); }

/* Titular en display con precio dentro: Source Serif 4 necesita que se lo pidan. */
h1 .num, h2 .num, h3 .num{ font-feature-settings:"tnum" 1, "lnum" 1; }

/* Botón de acento. */
.btn{
  display:inline-block;
  background:var(--acc);
  color:var(--paper);                /* 5,48:1 */
  border-radius:var(--r-2);
  padding:var(--s-3) var(--s-5);
  font-weight:var(--fw-semibold);
  transition:background var(--t-base) var(--ease);
}
.btn:hover{ background:var(--acc-hover); }   /* paper/acc-hover 6,98:1 */

/* Campo de formulario: el borde nunca es --line (1,35:1). */
input, textarea, select{
  font-family:var(--font-text);
  font-size:var(--fs-0);
  color:var(--ink);
  background:var(--paper-3);
  border:var(--bw-1) solid var(--ink-2);     /* 1,4.11: 7,62:1 contra el blanco del campo */
  border-radius:var(--r-2);
  padding:var(--s-3) var(--s-4);
}

/* =============================================================================
   Bloque oscuro. Cambia el contexto entero, no solo el fondo: acento, aviso,
   texto secundario, filetes y foco tienen aquí su propio token.
   Lo que NO cambia: las superficies claras (--acc-soft, --warn-soft, --paper-3)
   no se usan dentro de .on-dark; una tarjeta clara dentro del bloque oscuro es
   una sección aparte, no una variante.
============================================================================= */
.on-dark{
  background:var(--verde);
  color:var(--paper);                        /* 12,66:1 */
}
.on-dark .muted{ color:var(--ink-2-on-dark); }  /* 7,92:1 — nunca --ink-2 aquí (1,84) */
.on-dark a{ color:var(--acc-on-dark); }         /* 6,23:1 — nunca --acc aquí (2,31)   */
.on-dark .warn{ color:var(--warn-on-dark); }    /* 8,34:1 */
.on-dark hr,
.on-dark .rule{ border-color:var(--line-on-dark); background:var(--line-on-dark); }

.on-dark :focus-visible{
  outline-color:var(--acc-focus-on-dark);    /* 6,23:1 contra --verde */
  box-shadow:var(--sh-focus-on-dark);
}

/* El botón de acento dentro del bloque oscuro sigue siendo --acc de fondo con
   --paper de texto (5,48:1 dentro de la pieza). Lo que cambia es el anillo:
   sobre --verde no puede ser --acc. */
.on-dark .btn:focus-visible{ outline-color:var(--acc-focus-on-dark); }

/* Las sombras no existen en oscuro: separan con filete o con superficie. */
.on-dark .card{ box-shadow:none; border:var(--bw-1) solid var(--line-on-dark); }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}