/* ================================================================================================= Design tokens — Eurosur Sanlúcar Fase 1 v2 (PR_tokens_foundation) — 2026-07-23 Esta hoja es el ÚNICO punto de verdad para paleta, tipografía, radios, sombras y focus-ring. Cargar tras los vendor CSS y antes de custom.css (orden en blocks/head.php). Los temas estacionales (christmas.css / black.css / halloween.css) sólo sobreescriben --main-color y --main-color-lighter, y gracias a los aliases siguientes toda la web se retematiza. El alias legacy --main-color-* se mantiene mientras christmas.css/black.css/halloween.css lo sobreescriban directamente y custom.css/style.css third-party lo referencien. Los alias --eu-amber / --eu-amber-dark ya se eliminaron tras confirmar 0 hits en grep. ================================================================================================= */ :root { /* --- Brand & semantic primary (override-able por christmas/black/halloween) --- */ --eu-primary: #1a54e8; /* antes --main-color y --eu-amber */ --eu-primary-dark: #032bac; /* antes --main-color-lighter y --eu-amber-dark */ --eu-primary-soft: #eef2ff; /* antes --main-color-ultralight */ /* --- Texto --- */ --eu-ink: #1C2530; /* canónico (antes apuntaba a --main-color en custom.css — bug histórico) */ --eu-ink-soft: #2D3B4D; --eu-steel: #5C6B7A; --eu-steel-soft: #A8B3BD; /* canónico único — articulos.php y custom.css discrepaban (#8996A3). */ /* --- Superficies --- */ --eu-bg: #F4F6F8; --eu-bg-soft: #FFFFFF; --eu-border: #E1E5EA; --eu-border-dark: rgba(255, 255, 255, .1); /* --- Estados semánticos --- */ --eu-green: #2F855A; --eu-green-bg: #E9F5EF; --eu-red: #C23B3B; --eu-red-bg: #FBEAEA; --eu-amber-warn: #D69E2E; /* añadido Fase 1 de PLAN-ACCOUNT-DISCOUNT-TAG para .eu-status-chip--warning */ --eu-amber-warn-bg: #FEF5E7; --eu-amber-warn-text: #8a5a00; /* sobre #FEF5E7 da contraste ~5.46:1, WCAG AA ✓ */ /* --- Sombras semánticas (acompañan a --eu-*-bg en dark-mode o elevación): --- */ --eu-red-shadow: 0 4px 10px rgba(194, 59, 59, .25); /* glow usado por .discount-tag (PR_components_v1) */ /* --- Geometría --- */ --eu-radius: 10px; --eu-radius-sm: 6px; --eu-radius-lg: 18px; --eu-shadow-sm: 0 .25rem .75rem rgba(0, 0, 0, .05); --eu-shadow-md: 0 .5rem 1rem rgba(0, 0, 0, .08); --eu-shadow-lg: 0 1rem 2rem rgba(0, 0, 0, .15); /* --- Tipografía (Google Fonts ya cargadas en blocks/head.php) --- */ --eu-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --eu-font-display: 'Barlow Condensed', 'Inter', sans-serif; --eu-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* --- Header sticky height — valor provisional; el plan .opencode/PLAN-HEADER.md lo publica con la altura exacta. Usado por .eu-account-sidebar móvil para no solapar con el header sticky (FIX crítico PR_components_v1). */ --eu-header-height: 64px; /* --- Accesibilidad (focus rings consistentes) --- Las REGLAS :focus-visible se aplicarán en components.css / pdp.css. Aquí sólo declaramos variables. */ --eu-focus-ring-color: rgba(26, 84, 232, .35); --eu-focus-ring-shadow: 0 0 0 3px var(--eu-focus-ring-color); /* --- Modal / backdrop — fondo semitransparente para overlays tipo bottom-sheet. Token semántico para evitar rgba hardcoded. */ --eu-modal-backdrop: rgba(28, 37, 48, .55); /* --- Z-index system (PR_header_modernization_v1 — 2026-07-24, refinado 2026-07-24-bis, refinado 2026-07-24-tris tras feedback: backdrop AHORA cubre el header cuando un drawer está abierto — UX ecommerce estándar donde el header forma parte del "fondo" al abrir minicart/mobile-menu y no se quiere interactuar con él hasta cerrarlo). Single source of truth en 6+1 capas. Aplicar vía var() en TODOS los archivos CSS. El spinner #overlay queda siempre en el top para no dejarlo atrapado tras un drawer. --eu-z-overlay: search-overlay fullscreen (entre drawer y modal — modal swal puede apilar encima del search-overlay si se requiere). Capas (de menor a mayor): 1020 sticky: elementos sticky de página (PLP category-bar anclado, etc.) 1040 header: header sticky — DIMMED por backdrop cuando un drawer se abre 1045 backdrop: overlay oscuro detrás de drawers (ahora cubre el header) 1050 drawer: mobile menu + minicart + PLP category-sidebar-sheet (mutuamente excl.) 1060 overlay: search-overlay fullscreen (Doofinder-style) 1080 modal: cualquier modal (Bootstrap modal, SweetAlert) 9999 spinner: #overlay global, siempre encima */ --eu-z-sticky: 1020; /* sticky-header genérico, lightrope (christmas) */ --eu-z-header: 1040; /* .eu-header — DIMMED por backdrop 1045 cuando drawer abierto */ --eu-z-backdrop: 1045; /* overlay oscuro detrás de drawers (encima del header) */ --eu-z-drawer: 1050; /* mobile menu left-drawer + minicart (right-drawer en TODOS los viewports) + PLP category-sidebar-sheet (los 3 son mutuamente excluyentes) */ --eu-z-overlay: 1060; /* search-overlay fullscreen (Doofinder-style) */ --eu-z-modal: 1080; /* cualquier modal (Bootstrap modal, SweetAlert) */ --eu-z-spinner: 9999; /* spinner global #overlay, siempre encima */ /* --- Touch targets (WCAG 2.5.5) — altura mínima recomendada para áreas interactivas. Pragmático: padding del /