/* ═══════════════════════════════════════════════════════════════════════════ HEARTTRENDS LATAM — SISTEMA DE TOKENS Orden de Ejecución v1.0 · sección 5 (Doctrina de diseño) IDENTIDAD HEREDADA DEL SITIO OFICIAL hearttrends.com: · Naranja de marca #FC6000 (color dominante del original) · Naranja secundario #EB6E1C · Azul enlace #116DFF · Tipografía Futura LT (book / light) · DIN Next · Avenir LT SUSTITUCIONES TIPOGRÁFICAS (web-safe, servidas por Google Fonts): · Jost → geométrica humanista, la equivalencia libre más fiel a Futura · Inter → sustituta de DIN Next para texto corrido y datos REGLA MADRE DE COLOR (sección 5.2): un solo color de marca en --brand. Todo tinte, sombra, hover, borde y fondo se deriva con color-mix(). Prohibido duplicar hexadecimales. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── COLOR RAÍZ ───────────────────────────────────────────────────────── Solo estos tres valores son literales. Todo lo demás se deriva. */ --brand: #FC6000; /* naranja HeartTrends, tomado del sitio oficial */ --deep: #0A1B33; /* azul profundo institucional */ --heart: #D92B2B; /* rojo del corazón, criterio fijado en la animación AR */ /* ── ESCALA DE MARCA 50-900 (derivada) ──────────────────────────────── */ --brand-50: color-mix(in oklab, var(--brand) 6%, white); --brand-100: color-mix(in oklab, var(--brand) 12%, white); --brand-200: color-mix(in oklab, var(--brand) 24%, white); --brand-300: color-mix(in oklab, var(--brand) 40%, white); --brand-400: color-mix(in oklab, var(--brand) 68%, white); --brand-500: var(--brand); --brand-600: color-mix(in oklab, var(--brand) 88%, black); --brand-700: color-mix(in oklab, var(--brand) 74%, black); --brand-800: color-mix(in oklab, var(--brand) 58%, black); --brand-900: color-mix(in oklab, var(--brand) 42%, black); /* ── ESCALA AZUL PROFUNDO 50-900 (derivada) ─────────────────────────── */ --deep-50: color-mix(in oklab, var(--deep) 4%, white); --deep-100: color-mix(in oklab, var(--deep) 9%, white); --deep-200: color-mix(in oklab, var(--deep) 18%, white); --deep-300: color-mix(in oklab, var(--deep) 34%, white); --deep-400: color-mix(in oklab, var(--deep) 58%, white); --deep-500: color-mix(in oklab, var(--deep) 82%, white); --deep-600: var(--deep); --deep-700: color-mix(in oklab, var(--deep) 86%, black); --deep-800: color-mix(in oklab, var(--deep) 70%, black); --deep-900: color-mix(in oklab, var(--deep) 52%, black); /* ── NEUTRALES (derivados del azul: nunca grises muertos) ───────────── */ --n-0: #FFFFFF; --n-50: color-mix(in oklab, var(--deep) 2%, white); --n-100: color-mix(in oklab, var(--deep) 5%, white); --n-200: color-mix(in oklab, var(--deep) 11%, white); --n-300: color-mix(in oklab, var(--deep) 20%, white); --n-400: color-mix(in oklab, var(--deep) 38%, white); --n-500: color-mix(in oklab, var(--deep) 55%, white); --n-600: color-mix(in oklab, var(--deep) 70%, white); --n-700: color-mix(in oklab, var(--deep) 84%, white); --n-800: color-mix(in oklab, var(--deep) 94%, white); --n-900: var(--deep); /* ── TOKENS SEMÁNTICOS POR FUNCIÓN ──────────────────────────────────── */ --bg: var(--n-0); --bg-subtle: var(--n-50); --bg-muted: var(--n-100); --bg-inverse: var(--deep); --surface: var(--n-0); --surface-raised: var(--n-0); --text: var(--n-900); /* 15.8:1 sobre --bg */ --text-secondary: var(--n-600); /* 7.1:1 sobre --bg */ --text-muted: color-mix(in oklab, var(--n-500) 82%, var(--n-900)); /* >5:1 sobre claro y sobre --surface */ --text-inverse: var(--n-0); --text-on-brand: #10233F; /* azul profundo sobre naranja: contraste AA real */ --border: var(--n-200); --border-strong: var(--n-300); --border-focus: var(--brand-600); --action: var(--brand-700); /* naranja profundo: >5:1 sobre claro */ --action-hover: var(--brand-700); --action-bg: var(--brand); --action-bg-hover: color-mix(in oklab, var(--brand) 92%, white); --accent-heart: var(--heart); --success: #0E7C5A; --warning: var(--brand-700); --danger: var(--heart); /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────── */ --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif; --font-text: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Escala fluida: mínimo móvil → máximo escritorio */ --fs-3xs: 0.75rem; --fs-2xs: 0.8125rem; --fs-xs: 0.875rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem); --fs-lg: clamp(1.25rem, 0.7vw + 1.09rem, 1.5rem); --fs-xl: clamp(1.5rem, 1.3vw + 1.19rem, 2rem); --fs-2xl: clamp(1.875rem, 2.2vw + 1.36rem, 2.75rem); --fs-3xl: clamp(2.25rem, 3.6vw + 1.39rem, 3.75rem); --fs-4xl: clamp(2.75rem, 5.2vw + 1.5rem, 5rem); --lh-tight: 1.08; --lh-snug: 1.24; --lh-normal: 1.55; --lh-relaxed: 1.68; --tracking-tight: -0.022em; --tracking-snug: -0.012em; --tracking-wide: 0.02em; --tracking-caps: 0.14em; --measure: 68ch; /* línea de lectura: 60-75 caracteres */ /* ── ESPACIADO (escala de 4 px) ─────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-section: clamp(3.5rem, 7vw, 7rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); --maxw: 78rem; --maxw-prose: 44rem; /* ── RADIOS ─────────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* ── SOMBRAS (semitransparentes, por encima de bordes sólidos: 5.7) ── */ --sh-xs: 0 1px 2px color-mix(in oklab, var(--deep) 8%, transparent); --sh-sm: 0 2px 6px color-mix(in oklab, var(--deep) 9%, transparent); --sh-md: 0 6px 20px color-mix(in oklab, var(--deep) 11%, transparent); --sh-lg: 0 16px 44px color-mix(in oklab, var(--deep) 14%, transparent); --sh-brand: 0 8px 26px color-mix(in oklab, var(--brand) 26%, transparent); /* ── MOVIMIENTO (5.7: ease-out fuerte, nunca ease-in) ──────────────── */ --ease: cubic-bezier(0.23, 1, 0.32, 1); --t-fast: 120ms var(--ease); --t-button: 160ms var(--ease); --t-base: 240ms var(--ease); --t-slow: 420ms var(--ease); --z-base: 1; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; } /* ── MODO CLARO FIJO (decisión de marca, 6-ago-2026) ────────────────── El sitio se muestra siempre en blanco, igual para todos los visitantes, sin importar el tema del dispositivo. Para volverlo adaptable, restaurar el bloque de modo oscuro desde el historial de Git. */ :root { color-scheme: light; } /* Tema oscuro MANUAL: se activa solo desde el interruptor del menú. El sitio abre en blanco para todo el mundo; la preferencia se recuerda. */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--deep-800); --bg-subtle: var(--deep-700); --bg-muted: var(--deep-600); --bg-inverse: var(--deep-900); --surface: var(--deep-700); --surface-raised: color-mix(in oklab, var(--deep-700) 88%, white); --text: var(--n-50); --text-secondary: var(--n-300); --text-muted: var(--n-400); --text-inverse: var(--n-0); --border: color-mix(in oklab, var(--n-0) 13%, transparent); --border-strong: color-mix(in oklab, var(--n-0) 24%, transparent); --action: var(--brand-300); --action-hover: var(--brand-200); } /* ── MOVIMIENTO REDUCIDO (5.11, piso de calidad no negociable) ────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }