/** * Tokens del design system — Club Atlético Talleres * * Fuente de verdad: DESIGN-SYSTEM.md * Todo valor de color, tipografía o espaciado del theme sale de acá. * Ningún componente escribe un literal. * * Reglas que no se negocian: * - El hex del color secundario aparece UNA sola vez, en --t-secondary. Ver DESIGN-SYSTEM.md §1.5bis. * - Los tokens semánticos nunca derivan del secundario. * - En espaciado el sitio se ve igual que hoy: los valores son los medidos, no una escala * normalizada. Ver DESIGN-SYSTEM.md §0. * * @package Talleres */ :root { /* ═══════════════════════════════════════════════════════════ COLOR SECUNDARIO Único lugar del theme donde se escribe el color secundario. Color secundario 2026: naranja. Para cambiarlo seguir el runbook de DESIGN-SYSTEM.md §1.5bis — hay que revisar contraste y choques con los colores semánticos. ═══════════════════════════════════════════════════════════ */ --t-secondary: #EC653F; --t-secondary-hover: #B9583C; /* NO se deriva solo: recalcular a mano */ /* Roles que siguen al secundario */ --t-accent: var(--t-secondary); /* botones y CTA */ --t-accent-hover: var(--t-secondary-hover); --t-link: var(--t-secondary); /* links de contenido */ --t-link-hover: var(--t-secondary-hover); /* hover de links de contenido */ --t-promo-bar: var(--t-secondary); /* barra superior */ --t-stock-in: var(--t-secondary); /* badge «En stock» */ --t-price: var(--t-secondary); /* importe en catálogo y ficha */ /* ═══════════════════════════════════════════════════════════ NAVY — identidad del club, no depende del secundario ═══════════════════════════════════════════════════════════ */ --t-navy: #0A0543; /* texto y títulos */ /* El mismo, en componentes que lo necesitan transparente: el degradado de la cabecera con imagen del listado. `rgb()` no acepta un hex adentro. */ --t-navy-rgb: 10 5 67; --t-navy-surface: #021631; /* header, mega menú, bandas de sección */ /* El mismo navy en componentes: lo necesitan las tarjetas de imagen de la home, que lo usan transparente en un degradado y al 32 % en el hover. Se declara aparte porque `rgb()` no acepta un hex adentro. */ --t-navy-surface-rgb: 2 22 49; --t-navy-footer: #031D40; /* footer y copyright */ --t-offer-badge: #011E56; /* badge «¡Oferta!» — promoción, no estado */ /* ═══════════════════════════════════════════════════════════ TEXTO ═══════════════════════════════════════════════════════════ */ --t-ink: #1F2124; /* fuerte: preguntas, subtítulos, cabeceras de tabla */ --t-text-body: #707070; /* texto corrido */ --t-text-muted: #707376; /* secundario: cuotas, labels, breadcrumbs */ --t-price-muted: #757575; /* letra chica del precio, importes de carrito/checkout */ --t-search-placeholder: rgb(150 150 150 / 60%); /* placeholder del buscador del header, medido en A */ --t-text-subtle: #898989; /* microtexto y controles */ --t-shipping-msg: #374151; /* mensaje de la barra de envío gratis del header. Medido en A */ --t-heading-alt: #202020; /* títulos de sección: FAQ, «Filtros», «Talle». Ver DESIGN-SYSTEM §1.2 */ --t-whatsapp: #25D366; /* botón flotante de WhatsApp: el verde de la marca, no del sistema */ --t-whatsapp-hover: #1EAB53; /* su hover. Venía de custom-css-js (ccj 143806) */ --t-white: #FFFFFF; --t-white-soft: rgb(255 255 255 / 88%); /* hover del botón fantasma del footer, medido en A */ --t-footer-link: #CECECE; /* SOLO el footer, sobre navy. Ver §1.5 */ --t-scrim: #000000; /* velo sobre fotos, para que el texto blanco se lea. Nunca como color de texto ni de fondo: el negro de la marca es --t-navy. Ver DESIGN-SYSTEM §3.9undecies */ /* ═══════════════════════════════════════════════════════════ BORDES Y SUPERFICIES ═══════════════════════════════════════════════════════════ */ --t-border: #D5D8DC; /* divisores de contenido y de tabla */ --t-border-soft: #E0E0E0; /* cards, imágenes, inputs */ --t-border-strong: #B2B2B2; /* controles */ --t-border-chip: #C0CDE3; /* etiquetas del filtro activo del listado («3XL ×»). Elegido por la usuaria el 2026-10-01 */ --t-surface-soft: #F7F7F7; /* barra de beneficios, hover de menú, campos */ --t-surface-badge: #E5E7EB; /* fondo del badge «Sin stock» del buscador. Ver §1.7.2 */ /* Sombra de los desplegables (submenú del header, paneles). Medida en A. */ --t-shadow-dropdown: 0 10px 25px rgb(0 0 0 / 20%); --t-shadow-header: 0 5px 10px rgb(0 0 0 / 30%); /* El popup de campaña: el velo detrás y la sombra de la caja. Medidos en A, en el T-sale 2026 (395974). Ver DESIGN-SYSTEM §3.9terdecies. */ --t-backdrop: rgb(0 0 0 / 80%); --t-shadow-popup: 2px 8px 23px 3px rgb(0 0 0 / 20%); /* ═══════════════════════════════════════════════════════════ DISPONIBILIDAD — decidido en §1.7.2 (2026-09-08), revisado el 2026-09-24 En la ficha, «Temporalmente sin stock» va en rojo, a pedido de la usuaria: reemplaza la decisión del 2026-09-08 de dejarlo en --t-ink. Rojo propio, elegido por la usuaria el 2026-09-24: 5.0:1 sobre blanco, pasa AA a 16 px. No es --t-error ni el #FF0000 de A, que da 4:1. ═══════════════════════════════════════════════════════════ */ --t-stock-out: #DA1F15; /* «Temporalmente sin stock» de la ficha */ --t-stock-count: #77A464; /* «Disponibilidad: N disponibles». Verde del core de WooCommerce, se conserva a pedido de la usuaria y SOLO en la ficha de producto */ /* ═══════════════════════════════════════════════════════════ SEMÁNTICOS — nunca derivan del secundario Un error de pago y un botón de comprar no pueden ser el mismo color. --t-error se usa SOLO en formularios y pago. Nunca en el catálogo: el agotado de la ficha tiene su propio rojo, --t-stock-out. ═══════════════════════════════════════════════════════════ */ --t-success: #285708; --t-success-bg: #FAFFE6; --t-error: #B3261E; --t-error-bg: #FCECEA; --t-info: #1B5FAA; --t-info-bg: #E9F0FA; --t-highlight: rgba(255, 226, 58, .2); /* resaltado del buscador */ /* --t-warning: en pausa. Se define cuando aparezca el primer caso de uso. */ /* Estructura de los avisos de WooCommerce, tal como está hoy */ --t-notice-bg: #F7F6F7; --t-notice-text: #515151; --t-notice-border: 3px; /* ═══════════════════════════════════════════════════════════ TIPOGRAFÍA — familias Solo dos. Roboto, Montserrat y el fallback del sistema se eliminan. Ojo: la familia licenciada es "TT Travels Next", SIN el sufijo "Trial" que usa el CSS viejo. Ver DESIGN-SYSTEM.md §3.10. ═══════════════════════════════════════════════════════════ */ --t-font-display: "TT Travels Next", "Georama", system-ui, sans-serif; --t-font-body: "Georama", system-ui, -apple-system, sans-serif; --t-weight-light: 300; /* copyright del footer. Medido en A */ --t-weight-regular: 400; --t-weight-medium: 500; --t-weight-semibold: 600; /* h1 de las internas. Medido en A */ --t-weight-bold: 700; --t-weight-display: 800; /* único peso real de TT Travels hoy */ /* ═══════════════════════════════════════════════════════════ TIPOGRAFÍA — escala (desktop) Aplica a las páginas internas. La HOME queda exceptuada y conserva sus valores actuales: ver DESIGN-SYSTEM.md §3.8bis. ═══════════════════════════════════════════════════════════ */ --t-display-size: 40px; --t-display-lh: 48px; --t-h1-size: 36px; --t-h1-lh: 44px; --t-h2-size: 28px; --t-h2-lh: 36px; --t-h3-size: 20px; --t-h3-lh: 26px; --t-lead-size: 18px; --t-lead-lh: 27px; --t-body-size: 16px; --t-body-lh: 24px; --t-body-sm-size: 14px; --t-body-sm-lh: 21px; --t-caption-size: 12px; --t-caption-lh: 16px; /* ═══════════════════════════════════════════════════════════ ESPACIADO ⚠️ NO es una escala normalizada. Son los valores que el sitio usa hoy. El principio de DESIGN-SYSTEM.md §0 dice que el espaciado se ve igual que hoy, así que acá solo se tokeniza lo repetido y verificado. Para un componente nuevo, elegir entre estos valores antes de inventar. ═══════════════════════════════════════════════════════════ */ --t-grid-gap: 20px; /* grilla de productos — 214 usos medidos */ --t-input-height: 44px; /* hoy 43-44px, ya consistente en el checkout */ --t-input-padding: 12px; /* ═══════════════════════════════════════════════════════════ RADIOS Solo los seguros. Los sm/md/lg propuestos NO se aplican: mover un card de 20 a 12 se nota. Ver DESIGN-SYSTEM.md §3bis.7. ═══════════════════════════════════════════════════════════ */ --t-radius-input: 4px; /* inputs y botones — valor del kit */ --t-radius-card: 20px; /* cards y bloques */ --t-radius-full: 999px; /* absorbe 50/100/150: los tres ya son círculo */ /* ═══════════════════════════════════════════════════════════ LAYOUT Los anchos NO se unifican: el sitio se ve igual que hoy. Estos son los de referencia del kit, para componentes nuevos. ═══════════════════════════════════════════════════════════ */ --t-container: 1140px; --t-container-wide: 1400px; /* ═══════════════════════════════════════════════════════════ COMPATIBILIDAD Variables que style.css ya usaba. Se mantienen como alias para no tocar 26 declaraciones existentes ni mover un píxel. No usar en código nuevo: usar los tokens --t-* de arriba. ═══════════════════════════════════════════════════════════ */ --primary: var(--t-offer-badge); /* #011E56 — 9 usos en style.css */ --primary-highlight: #002875; /* solo en talleres.css */ --faded: #8BA0C9; /* 2 usos: botón en estado loading */ /* --accent (#FF6B2F) se eliminó: 0 usos en todo el theme. Era un cuarto naranja. */ } /* ═══════════════════════════════════════════════════════════════ TIPOGRAFÍA — mobile (≤767px) Los títulos bajan ~22%. El texto de lectura NO cambia, que es lo correcto. Breakpoints del theme: mobile ≤767 · tablet 768-1024 · desktop ≥1025. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { :root { --t-display-size: 30px; --t-display-lh: 36px; --t-h1-size: 28px; --t-h1-lh: 34px; --t-h2-size: 24px; --t-h2-lh: 30px; --t-h3-size: 18px; --t-h3-lh: 24px; } }