/* Rodacumbres design tokens — extracted from claude design bundle. */ :root { /* El sitio es dark-mode forzado. Sin esto el browser pinta los form controls nativos (date picker, scrollbar, select dropdown) con temática light — el calendar-picker-indicator queda casi invisible sobre fondo oscuro y los popups del date input vienen en blanco. */ color-scheme: dark; /* ---------- CORE PALETTE ---------------------------------------------- */ /* Ink — the canvas is always near-black */ --rc-ink-0: #000000; /* pure black, hero bg */ --rc-ink-900: #0a0a0a; /* page bg */ --rc-ink-800: #141414; /* card / panel bg */ --rc-ink-700: #1f1f1f; /* raised card */ --rc-ink-600: #2a2a2a; /* hairline borders on dark */ --rc-ink-500: #3a3a3a; /* divider */ /* Bone — text on dark */ --rc-bone-0: #ffffff; --rc-bone-100: #f5f1ea; /* warm white, primary fg */ --rc-bone-300: #b8b2a6; /* secondary fg */ --rc-bone-500: #7a7468; /* tertiary / meta */ /* Naranja — primary accent, "lava" */ --rc-orange-300: #f4a96b; /* tint */ --rc-orange-400: #ee8c41; /* hover / glow */ --rc-orange-500: #e8742c; /* PRIMARY brand orange (from brief) */ --rc-orange-600: #c75d1c; /* pressed / deeper */ --rc-orange-700: #9c4513; /* darkest, on-light */ /* Verde petróleo — secondary accent (logo green) */ --rc-petrol-300: #4a7a6e; --rc-petrol-400: #36625a; --rc-petrol-500: #2a4a42; /* PRIMARY petrol (sampled from logo) */ --rc-petrol-600: #1f3832; --rc-petrol-700: #142621; /* ---------- Semantic — feedback / validation ------------------------- Cada color semántico tiene una rampa: tint claro (-300/-400), base (-500), profundo (-600), un tint translúcido para fondos (-tint) y un edge translúcido para bordes (-edge). Uso: • base → iconos + acentos de texto • tint → fondos suaves • edge → bordes Los alias sin sufijo (--rc-danger, --rc-success, --rc-warning, --rc-info) apuntan al -500 y existen para no romper consumidores previos. */ --rc-success-300: #7bd4a0; --rc-success-500: #4caf6f; --rc-success-600: #2f8a52; --rc-success-tint: rgba(76, 175, 111, 0.10); --rc-success-edge: rgba(76, 175, 111, 0.38); --rc-success: var(--rc-success-500); --rc-warning-300: #f6cc6b; --rc-warning-500: #f0b429; --rc-warning-600: #c69312; --rc-warning-tint: rgba(240, 180, 41, 0.10); --rc-warning-edge: rgba(240, 180, 41, 0.38); --rc-warning: var(--rc-warning-500); --rc-danger-300: #f08b95; --rc-danger-400: #ee5f6d; --rc-danger-500: #e63946; --rc-danger-600: #c11d2d; --rc-danger-tint: rgba(230, 57, 70, 0.10); --rc-danger-edge: rgba(230, 57, 70, 0.40); --rc-danger: var(--rc-danger-500); --rc-error: var(--rc-danger-500); --rc-info: var(--rc-petrol-400); --rc-info-tint: rgba(54, 98, 90, 0.16); --rc-info-edge: rgba(54, 98, 90, 0.48); /* ---------- ROLE TOKENS ---------------------------------------------- */ --rc-bg: var(--rc-ink-900); --rc-bg-elevated: var(--rc-ink-800); --rc-bg-raised: var(--rc-ink-700); --rc-fg: var(--rc-bone-100); --rc-fg-muted: var(--rc-bone-300); --rc-fg-faint: var(--rc-bone-500); --rc-accent: var(--rc-orange-500); --rc-accent-hover: var(--rc-orange-400); --rc-accent-press: var(--rc-orange-600); --rc-on-accent: var(--rc-ink-0); /* black ink on orange */ --rc-secondary: var(--rc-petrol-500); --rc-border: var(--rc-ink-600); --rc-border-strong: var(--rc-bone-500); /* ---------- TYPE FAMILIES -------------------------------------------- Type stack is a THREE-VOICE system: • A typewriter-stamp display (Special Elite, brand-licensed) used for race-card / dossier moments — eyebrows, hero lemas, ticket-style chrome. • A chunky poster face (Bowlby One) for H1/H2 — the loudest "shout". • A condensed sport face (Barlow Condensed) for H3–H5, UI labels. • Inter for body. JetBrains Mono for race numbers / data. The grit comes from Special Elite's worn typewriter letterforms, not from a wet-paint script. Pair Special Elite with high contrast and lots of uppercase — it reads as "field-stamped" rather than corporate-clean. ----------------------------------------------------------------------- */ --rc-font-spray: "Special Elite", "Courier Prime", "Courier New", ui-monospace, monospace; --rc-font-display: "Bowlby One", "Impact", system-ui, sans-serif; --rc-font-headline:"Barlow Condensed", "Oswald", "Impact", system-ui, sans-serif; --rc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --rc-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- TYPE SCALE (clamped, sport-poster proportions) ----------- */ --rc-text-xs: 0.75rem; /* 12px - meta */ --rc-text-sm: 0.875rem; /* 14px - small body */ --rc-text-base: 1rem; /* 16px - body */ --rc-text-lg: 1.125rem; /* 18px - intro */ --rc-text-xl: 1.375rem; /* 22px - eyebrow */ --rc-text-2xl: 1.75rem; /* 28px - h4 */ --rc-text-3xl: 2.25rem; /* 36px - h3 */ --rc-text-4xl: clamp(2.5rem, 4vw + 1rem, 3.75rem); /* h2 */ --rc-text-5xl: clamp(3rem, 6vw + 1rem, 5.5rem); /* h1 */ --rc-text-hero: clamp(4rem, 11vw + 1rem, 10rem); /* poster headline */ --rc-leading-tight: 0.95; --rc-leading-snug: 1.1; --rc-leading-body: 1.55; --rc-tracking-stencil: 0.06em; /* opens up display caps */ --rc-tracking-eyebrow: 0.18em; /* small caps eyebrows */ /* ---------- SPACING (4pt base, race-poster generous) ----------------- */ --rc-space-1: 0.25rem; --rc-space-2: 0.5rem; --rc-space-3: 0.75rem; --rc-space-4: 1rem; --rc-space-5: 1.5rem; --rc-space-6: 2rem; --rc-space-7: 3rem; --rc-space-8: 4rem; --rc-space-9: 6rem; --rc-space-10: 8rem; /* ---------- RADII ---------------------------------------------------- */ --rc-radius-none: 0; --rc-radius-xs: 2px; --rc-radius-sm: 4px; --rc-radius-md: 8px; /* default card */ --rc-radius-lg: 14px; --rc-radius-pill: 999px; /* "Cut" — diagonal clip for tabs / hero corners */ --rc-clip-cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); --rc-clip-cut-tl: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); /* ---------- SHADOWS / GLOWS ----------------------------------------- */ /* On dark we use orange-cast glows + sharp drop shadows, not soft blurs */ --rc-shadow-card: 0 8px 24px -8px rgba(0,0,0,0.85); --rc-shadow-lift: 0 18px 48px -16px rgba(0,0,0,0.9); --rc-shadow-stamp: 4px 4px 0 0 var(--rc-ink-0); /* offset poster shadow */ --rc-glow-orange: 0 0 0 1px var(--rc-orange-500), 0 0 32px -4px rgba(232,116,44,0.55); --rc-glow-petrol: 0 0 0 1px var(--rc-petrol-400), 0 0 28px -8px rgba(54,98,90,0.55); --rc-inner-grit: inset 0 0 0 1px rgba(255,255,255,0.04); /* ---------- MOTION --------------------------------------------------- */ --rc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* default UI */ --rc-ease-snap: cubic-bezier(0.7, 0, 0.2, 1); /* punchy buttons */ --rc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* badges/medals pop in */ --rc-dur-fast: 120ms; --rc-dur-base: 220ms; --rc-dur-slow: 420ms; }