/* ============================================================================= ROCK THE DISTANCE / CARRERAS MÉXICO — tokens.css Fuente única de verdad del diseño. CSS plano con custom properties. Tema OSCURO por defecto. Acentos neón. Espaciado base 4px. Cómo usar: diseña SIEMPRE contra los ALIAS SEMÁNTICOS (sección 3) y los combos de tipografía (sección 4). Los valores crudos (sección 1) son la materia prima: no los uses directamente en componentes. Índice: 0) Import de fuentes (Nunito + Barlow) 1) Paleta base (valores crudos) 2) Estados derivados (hover / pressed / soft) con oklch(from …) 3) Alias semánticos (superficies, texto, acentos, bordes) 4) Tipografía (familias, pesos, escala, combos shorthand) 5) Espaciado / radios / tamaños / layout 6) Sombras / foco / movimiento 7) Modo claro [data-theme="light"] 8) Alias heredados (compatibilidad con CSS existente) — NO OMITIR ============================================================================= */ /* ============================================================================= 0) IMPORT DE FUENTES — Nunito (texto) + Barlow (números, cifras tabulares) ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700;800;900&display=swap'); :root { /* =========================================================================== 1) PALETA BASE — valores crudos de marca. NO usar directo en componentes. =========================================================================== */ /* --- Acentos (Principales) --- */ --green: #00E276; /* primario: acción, éxito, activo */ --blue: #0099FF; /* info, enlaces */ --purple: #B748FF; /* acento, categorías */ --red: #FC445F; /* peligro, error */ --orange: #FF7639; /* advertencia */ --yellow: #FFC55F; /* precaución, resalte */ /* --- Neutros: rampa de tinta (oscuro → claro) --- */ --ink-900: #131319; /* fondo de página */ --ink-800: #1C1C24; /* superficie hundida / inset (derivada de la rampa) */ --ink-700: #292932; /* tarjetas */ --ink-600: #33333D; /* superficie elevada (derivada) */ --ink-500: #44444F; /* bordes */ --ink-400: #8A8A99; /* gris tenue: placeholders, iconos */ --ink-300: #B3B3B3; /* gris secundario */ --white: #FFFFFF; /* texto blanco */ --black: #000000; /* =========================================================================== 2) ESTADOS DERIVADOS — hover (+luz), pressed (−luz) y soft (~14% alpha). Se derivan con oklch(from …) para mantener tono/croma constantes. Sustituye los hex de marca de forma perceptualmente uniforme. =========================================================================== */ /* Verde / éxito / primario */ --green-hover: oklch(from var(--green) calc(l + 0.06) c h); --green-pressed: oklch(from var(--green) calc(l - 0.07) c h); --green-soft: oklch(from var(--green) l c h / 0.14); /* Azul / info / enlaces */ --blue-hover: oklch(from var(--blue) calc(l + 0.06) c h); --blue-pressed: oklch(from var(--blue) calc(l - 0.07) c h); --blue-soft: oklch(from var(--blue) l c h / 0.14); /* Rojo / peligro / error */ --red-hover: oklch(from var(--red) calc(l + 0.06) c h); --red-pressed: oklch(from var(--red) calc(l - 0.07) c h); --red-soft: oklch(from var(--red) l c h / 0.14); /* Softs auxiliares para los acentos restantes (status pills, resaltes) */ --purple-soft: oklch(from var(--purple) l c h / 0.14); --orange-soft: oklch(from var(--orange) l c h / 0.14); --yellow-soft: oklch(from var(--yellow) l c h / 0.16); /* =========================================================================== 3) ALIAS SEMÁNTICOS — DISEÑA CONTRA ESTOS, no contra los hex. =========================================================================== */ /* --- Superficies --- */ --surface-page: var(--ink-900); /* lienzo de la app */ --surface-card: var(--ink-700); /* tarjetas y paneles */ --surface-raised: var(--ink-600); /* menús, popovers, controles elevados */ --surface-inset: var(--ink-800); /* campos, áreas hundidas, tracks */ --surface-overlay: rgb(0 0 0 / 0.6);/* scrim de modales */ /* --- Texto --- */ --text-primary: var(--white); --text-secondary: var(--ink-300); --text-muted: #9A9AA9; /* texto tenue legible (AA): metadatos/captions. Para íconos/bordes usa --ink-400 */ --text-on-accent: var(--ink-900); /* texto sobre relleno verde/neón */ --text-link: var(--blue); /* --- Acentos (rol semántico) --- */ --brand: var(--green); --success: var(--green); --info: var(--blue); --danger: var(--red); --warning: var(--orange); --caution: var(--yellow); --accent: var(--purple); /* --- Bordes --- */ --border: var(--ink-500); /* bordes de inputs / énfasis */ --border-subtle: rgb(255 255 255 / 0.08); /* hairline por defecto en tarjetas */ --border-strong: var(--ink-400); /* =========================================================================== 4) TIPOGRAFÍA Texto/títulos/botones → Nunito. Números/métricas/precios → Barlow. =========================================================================== */ /* --- Familias --- */ --font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: var(--font-sans); /* --- Pesos --- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* --- Escala de tamaños --- */ --fs-display: 44px; --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 21px; --fs-title: 18px; --fs-body: 15px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-label: 12px; --fs-micro: 11px; /* --- Line-heights --- */ --lh-tight: 1.1; /* display / cifras grandes */ --lh-heading: 1.2; /* h1–h3 */ --lh-snug: 1.35; /* títulos de tarjeta, labels */ --lh-body: 1.5; /* texto corrido */ /* --- Letter-spacing --- */ --ls-tight: -0.02em; /* display / headings grandes */ --ls-normal: 0; --ls-wide: 0.01em; --ls-overline: 0.08em; /* overlines / tags en mayúsculas */ /* --- Cifras tabulares (para números alineados en columnas) --- */ --num-features: "tnum" 1, "lnum" 1; /* --- Combos listos (font shorthand: style weight size/line-height family) --- Uso: font: var(--text-h1); letter-spacing: var(--ls-tight); */ --text-display: var(--weight-semibold) var(--fs-display)/var(--lh-tight) var(--font-numeric); /* cifras hero en Barlow (600: menos "gordas") */ --text-h1: var(--weight-extrabold) var(--fs-h1)/var(--lh-heading) var(--font-sans); --text-h2: var(--weight-bold) var(--fs-h2)/var(--lh-heading) var(--font-sans); --text-h3: var(--weight-bold) var(--fs-h3)/var(--lh-snug) var(--font-sans); --text-card-title: var(--weight-bold) var(--fs-title)/var(--lh-snug) var(--font-sans); --text-body: var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-sans); --text-caption: var(--weight-regular) var(--fs-caption)/var(--lh-snug) var(--font-sans); --text-button: var(--weight-bold) var(--fs-body)/1 var(--font-sans); --text-metric: var(--weight-semibold) var(--fs-h2)/var(--lh-tight) var(--font-numeric); /* métricas/precios (600) */ /* =========================================================================== 5) ESPACIADO / RADIOS / TAMAÑOS / LAYOUT — escala base 4px =========================================================================== */ /* --- Espaciado (4px * n) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* workhorse */ --space-5: 20px; --space-6: 24px; /* workhorse */ --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; /* --- Radios --- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; /* controles: botones, inputs */ --radius-lg: 16px; /* tarjetas, paneles */ --radius-xl: 24px; --radius-pill: 999px; /* tags, switches, avatares */ /* --- Alturas de control --- */ --control-sm: 32px; --control-md: 40px; --control-lg: 48px; /* --- Layout --- */ --sidebar-w: 248px; --header-h: 72px; --page-max: 1280px; --page-gutter: var(--space-6); /* =========================================================================== 6) SOMBRAS / FOCO / MOVIMIENTO Sombras profundas y casi negras para lienzo oscuro (nunca gris). =========================================================================== */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45); --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55); --shadow-pop: 0 16px 48px rgb(0 0 0 / 0.60); --glow-brand: 0 0 0 1px var(--green-soft), 0 4px 16px oklch(from var(--green) l c h / 0.30); --hairline-top: inset 0 1px 0 rgb(255 255 255 / 0.06); /* --- Foco --- */ --focus-ring: 0 0 0 3px oklch(from var(--green) l c h / 0.45); --focus-ring-error: 0 0 0 3px oklch(from var(--red) l c h / 0.45); /* --- Movimiento --- */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ============================================================================= 7) MODO CLARO — overrides bajo . Solo cambian superficies, texto y bordes. Los ACENTOS se mantienen. ============================================================================= */ [data-theme="light"] { /* Controles nativos (select, date) en modo claro aunque el teléfono esté en modo oscuro: sin esto, iOS pinta los