/* ============================================================ tokens.css — Design tokens (Amazing World) Identidad oficial congelada (Ficha 01 · VISUAL_IDENTITY_AMAZING_WORLD). Única fuente de verdad para color, tipografía, espaciado y motion. No usar HEX sueltos en componentes: referenciar estas variables. ============================================================ */ /* ---- Tipografía autoalojada ---- */ /* Inter (secundaria): woff2 variable self-host → font-src 'self'. */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/fonts/inter-variable.woff2") format("woff2"); } /* Satoshi (principal) se carga vía Fontshare en (no está en npm). Requiere excepción CSP documentada. TODO: autoalojar cuando se licencie. */ :root{ /* ============ PALETA OFICIAL ============ */ /* Corporativos */ --aw-coral:#FF5A4D; --aw-mint:#20C6A3; --aw-blue:#1E3A8A; /* Azul Profundo */ --aw-purple:#7C5CFF; /* Morado */ --aw-ink:#111827; /* Gris Antracita */ --aw-mist:#F3F4F6; /* Gris Claro */ /* Soporte */ --aw-cream:#FFF7F0; --aw-sand:#F1EDE6; --aw-line:#E5E7EB; --aw-graphite:#374151; /* Semánticos */ --aw-success:#16A34A; --aw-warning:#F59E0B; --aw-error:#EF4444; --aw-info:#3B82F6; /* ---- Productos: valores verificados en repos (Brand Freeze v1.1) ---- */ --zephy-primary:#20C6A3; --zephy-bg:#F6F1EA; --nael-primary:#F5811F; --nael-bg:#F4F5F4; --scaf-primary:#1E3A8A; --scaf-secondary:#4F73B8; /* ============ ROLES ============ */ --bg:#FCFAF7; /* blanco cálido (no clínico) */ --bg-alt:var(--aw-cream); --surface:var(--aw-mist); --surface-2:#EAECF1; --ink:var(--aw-ink); --text:var(--aw-ink); --text-muted:#6B7280; --text-faint:#9CA3AF; --border:var(--aw-line); --border-strong:#D5DAE2; /* Superficies oscuras (protagonista SCAF / contacto) */ --dark:#0C1220; --dark-2:#141d31; --on-dark:#F5F7FB; --on-dark-muted:#9BA8BE; --border-dark:#24304a; --accent:var(--aw-coral); /* acción principal de marca */ /* ============ TIPOGRAFÍA ============ */ --font-display:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,"JetBrains Mono","Roboto Mono",monospace; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:clamp(1.5rem,2.4vw,2rem); --text-3xl:clamp(2rem,4.4vw,3.4rem); --text-4xl:clamp(2.4rem,5.4vw,4.2rem); --text-display:clamp(2.9rem,8vw,6.4rem); --leading-tight:1.02; --leading-snug:1.14; --leading-normal:1.62; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:900; --tracking-tight:-.03em; --tracking-tighter:-.045em; --tracking-wide:.14em; /* ============ ESPACIADO / LAYOUT ============ */ --space-0-5:4px; --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px; --space-8:64px; --space-10:80px; --space-12:96px; --space-14:112px; --space-16:140px; --container:1320px; --content:1180px; --gutter:clamp(20px,5vw,64px); --radius-sm:8px; --radius:14px; --radius-lg:22px; --radius-pill:999px; --radius-mod:16%; /* radio oficial del símbolo */ --shadow-sm:0 1px 2px rgba(17,24,39,.05); --shadow:0 10px 40px rgba(17,24,39,.08); --shadow-lg:0 30px 70px rgba(17,24,39,.12); /* ============ MOTION (suave · rápido · natural · con propósito) ============ */ --dur-1:160ms; --dur-2:280ms; --dur-3:520ms; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); }