/* WYLDER Design System — tokens concatenados. NO usar @import aquí: encadena descargas y retrasa el primer pintado. Fuente de la verdad: tokens/*.css — este archivo se regenera a partir de ellos. Las fuentes de Google se enlazan directamente desde el de cada página. */ /* ---- tokens/colors.css ---- */ /* WYLDER · Color palette — from WYLDER_design.md §03 */ :root{ /* Base palette (exact HEX from the brand book) */ --wy-navy:#0C005A; /* Navy — Primario · Pantone 2756 C */ --wy-yellow:#FFF500; /* Yellow — Acento · Pantone 012 C */ --wy-white:#FFFFFF; /* Blanco — Base */ --wy-burdeos:#950000; /* Burdeos */ --wy-dorado:#E2BB6F; /* Dorado */ --wy-navy-2:#1A273F; /* Navy — Secundario */ /* Tints / shades derived for UI states (not in book — kept minimal & on-brand) */ --wy-navy-900:#08003D; --wy-navy-700:#0C005A; --wy-navy-hover:#160a6e; /* button hover on navy */ --wy-yellow-hover:#e6dd00;/* button hover on yellow */ --wy-ink-05:rgba(12,0,90,.05); --wy-ink-10:rgba(12,0,90,.10); --wy-ink-20:rgba(12,0,90,.20); --wy-white-10:rgba(255,255,255,.10); --wy-white-20:rgba(255,255,255,.20); --wy-white-60:rgba(255,255,255,.60); /* Semantic aliases */ --surface-base:var(--wy-white); --surface-navy:var(--wy-navy); --surface-navy-alt:var(--wy-navy-2); --surface-yellow:var(--wy-yellow); --surface-card:var(--wy-white); --text-body:var(--wy-navy-2); /* long-form on white */ --text-strong:var(--wy-navy); --text-muted:rgba(26,39,63,.62); --text-on-navy:var(--wy-white); --text-on-navy-muted:var(--wy-white-60); --text-accent:var(--wy-yellow); /* yellow on navy only */ --text-on-yellow:var(--wy-navy); --cta-bg:var(--wy-yellow); --cta-text:var(--wy-navy); --cta-bg-hover:var(--wy-yellow-hover); --border-ink:var(--wy-navy); --border-hair:var(--wy-ink-10); --border-on-navy:var(--wy-white-20); --accent-danger:var(--wy-burdeos); --accent-warm:var(--wy-dorado); } /* ---- tokens/typography.css ---- */ /* WYLDER · Typography — from WYLDER_design.md §04 */ :root{ /* Families */ --font-display:'Syne','Arial Black',system-ui,sans-serif; /* Horizon substitute — hero/logo */ --font-section:'Bebas Neue','Arial Narrow',sans-serif; /* H2 section titles / TikTok hook */ --font-sub:'Anton','Arial Black',sans-serif; /* H3 subsection / destino */ --font-accent:'Anek Latin','Arial',sans-serif; /* labels, subheads, badges */ --font-alt:'Onest',system-ui,sans-serif; /* alt subtitle face */ --font-body:Arial,Helvetica,'Helvetica Neue',sans-serif; /* body / UI / docs */ /* Weights */ --fw-body:400; /* @kind font */ --fw-bold:700; /* @kind font */ --fw-black:800; /* @kind font */ --fw-heavy:900; /* @kind font */ /* Type scale (digital) — px values from the book's ranges */ --fs-hero:88px; /* H1 Hero 72–96 */ --fs-h2:56px; /* H2 Section 48–64 */ --fs-h3:36px; /* H3 Subsection 32–40 */ --fs-body-lg:17px; /* Body Large 16–18 */ --fs-body:14px; /* Body Base 13–15 */ --fs-caption:11px; /* Caption / Label 10–12 */ --fs-cta:16px; /* CTA / Button 14–18 */ /* Line heights */ --lh-display:0.96; /* @kind other */ --lh-heading:1.02; /* @kind other */ --lh-body:1.55; /* @kind other */ --lh-tight:1.15; /* @kind other */ /* Tracking — display uses POSITIVE / neutral only (never negative) */ --tracking-display:0.08em; /* Horizon/Syne +0.1 */ --tracking-section:0.02em; --tracking-label:0.14em; /* uppercase labels */ --tracking-body:0; } /* ---- tokens/spacing.css ---- */ /* WYLDER · Spacing & layout — 4px base grid (not in book; sensible default) */ :root{ --sp-0:0; /* @kind spacing */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --container:1200px; --gutter:24px; --section-y:96px; /* vertical rhythm between full-bleed sections */ } /* ---- tokens/effects.css ---- */ /* WYLDER · Radius, borders, shadow — raw editorial = sharp corners, hard edges */ :root{ /* Corner radius — brand favours SHARP. Small scale only where softness helps. */ --radius-none:0; --radius-sm:2px; --radius-md:4px; --radius-pill:999px; /* only for small chips/badges */ /* Borders — bold, ink-weight rules are a brand signature */ --bw-hair:1px; --bw-rule:2px; --bw-bold:3px; /* Shadows — used sparingly. No hard drop-shadow on display type (except video). */ --shadow-none:none; --shadow-card:0 2px 0 var(--wy-navy); /* offset "printed" block shadow */ --shadow-lift:0 12px 32px rgba(12,0,90,.18); --shadow-inset-hair:inset 0 0 0 1px var(--wy-ink-10); /* Motion — decisive, no bounce */ --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */ --dur-fast:120ms; /* @kind other */ --dur-base:200ms; /* @kind other */ }