/* ==========================================================================
   Terroir Comando · tokens
   Única fuente de verdad de color, tipografía, escenario, forma, motion y capas.
   El JavaScript lee estos mismos valores con TC.token('--nombre'): no se repiten en código.
   ========================================================================== */
:root{
  /* ---- color ---- */
  --c-invert:#141414;          /* fondo oscuro de la marca (secuencia de la mano, 03 oscuro) */
  --c-invert-fuerte:#050505;   /* velos sobre lo que queda debajo */
  --c-papel:#fafafa;           /* fondo claro */
  --c-blanco:#ffffff;          /* tarjetas */
  --aspect-botellas:1.2;       /* img/botellas.jpg (2048 × 1707): en móvil la capa toma este ancho para el panel horizontal */
  --hscroll-pie:28px;         /* indicación de scroll de la portada: distancia al borde inferior de la ventana (px de artboard) */
  --c-ink:#ffffff;  --c-ink-2:#d6d6d6;  --c-ink-3:#a8a8a8;        /* texto sobre oscuro */
  --c-tinta:#050505; --c-tinta-2:#3a3a3a; --c-tinta-3:#6b6b6b;    /* texto sobre claro */
  --c-acento:#f95f34;          /* naranja de acento: el destello del texto */
  --c-acento-texto:#c93d14;    /* el mismo naranja, oscurecido para texto pequeño sobre claro (5:1 sobre blanco, AA) */
  --c-marca:#ed4018;           /* naranja de marca: fondo del 05, hover de botones */
  --c-margen:#0b0b0b;          /* fuera del escenario */
  --rgb-fuerte:5,5,5;          /* --c-invert-fuerte en canales, para degradados: rgba(var(--rgb-fuerte),.6) */
  --c-linea:rgba(128,128,128,.3);   /* pista de una barra de progreso (marcador, índice) */
  --c-linea-fuerte:#8d8d8d;         /* avance del marcador */
  --c-retrato:#e9e7e3;              /* fondo de un retrato mientras llega la foto */
  --c-etiqueta:rgba(11,11,11,.86);  /* pastilla de las etiquetas del índice */
  --c-rotulo:rgba(20,20,20,.82);    /* rótulo de revisión: fondo, botón y botón al pasar */
  --c-rotulo-boton:rgba(255,255,255,.12);
  --c-rotulo-boton-hover:rgba(255,255,255,.2);
  --c-cinta-nombre:#4a4a4a;         /* nombre de la bodega bajo cada ficha de la cinta 3D (06) */

  --luz-oscuro:radial-gradient(120% 95% at 18% 0%,rgba(255,255,255,.055),rgba(255,255,255,0) 62%);   /* caída de luz quieta en los fondos oscuros, desde arriba a la izquierda como en las fotos */

  /* ---- veladuras: color de partida del texto velado según su fondo ---- */
  --c-velo-oscuro:#4a4a4a;
  --c-velo-papel:#bdbdbd;
  --c-velo-tarjeta:#c4c4c4;
  --c-velo-foto:rgba(255,255,255,.3);
  --c-velo-cifra:#cfcfcf;
  --c-velo-acento:#e6c2b6;

  /* ---- tipografía (solo Google Fonts) ---- */
  --f-display:'League Spartan',system-ui,sans-serif;
  --f-ui:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- escenario fluido: ocupa toda la ventana; la composición (artboard de Figma, 1440 × 900) se escala con --k
     para caber entera y se centra con --ox / --oy. Los fondos van a sangre. Los cinco valores los escribe TC.medir()
     en px; los de aquí son solo el arranque. ---- */
  --W:100vw;                   /* ancho del escenario */
  --S:100vh;                   /* alto del escenario: una "pantalla" en todas las medidas de scroll */
  --AW:1440px;                 /* ancho del artboard: 1440 en formato ancho, 390 en formato alto (móvil y tablet vertical) */
  --AH:900px;                  /* alto del artboard: 900 en ancho, 844 en alto */
  --k:1;                       /* escala del artboard: min(W/AW, S/AH) */
  --ox:0px;                    /* margen horizontal del artboard dentro del escenario */
  --oy:0px;                    /* margen vertical del artboard dentro del escenario */
  --margen:64px;               /* margen lateral del diseño, en px de artboard */

  /* ---- forma ---- */
  --r-tarjeta:12px;
  --r-pill:999px;
  --borde:5px;                 /* amplitud del borde roto de los paneles que entran (px de artboard) */
  --sombra-tarjeta:0 24px 48px rgba(0,0,0,.16);
  --sombra-tarjeta-lejos:0 70px 110px rgba(0,0,0,.07);   /* la tarjeta antes de posarse */

  /* ---- motion (lo que vive en CSS; el resto en js/tc.core.js · TC.E y TC.M) ---- */
  --e-expo:cubic-bezier(.16,1,.3,1);
  --t-corta:.3s;               /* cambios de tinta y de opacidad de la interfaz */
  --t-media:.5s;               /* relleno de botones, aparición de piezas */
  --t-marca:.48s;              /* una marca completa en CSS: destello que entra, se sostiene y sale (= M.flIn + M.flHold + M.flOut) */
  --destello-tono:1;           /* cuánto naranja lleva el destello del texto: 1 = acento puro; menos lo acerca a la tinta final (lo lee tc.text.js) */
  --t-nav:.8s;                 /* desplazamientos de la interfaz fija */

  /* ---- capas fijas ---- */
  --z-marcador:15; --z-indice:16; --z-nav:17; --z-revision:20; --z-salto:30;

  color-scheme:dark;
}