/* ========================================================================== FanApp design tokens — three explicit layers: 1. SEMANTIC TOKENS — the names every component consumes (--bg, --surface, --text-primary, --accent, --event-goal, ...). Components must never reach for a raw hex value. 2. THEME TOKENS — the values behind those names, resolved per theme. Dark lives on :root (default + ). Light lives on , with an @media fallback for the no-JS / JS-not-yet-run case. Light is designed on its own terms (soft off-white, deepened accents for contrast) — not an inverted dark. 3. CLUB TOKENS — --club-* is a separate, currently-inert layer for future authenticated personalization. The public landing never reads these except inside the small opt-in demo widget in "Cómo funciona". ========================================================================== */ :root { /* --------------------------------------------------------------------- THEME TOKENS — dark (default) --------------------------------------------------------------------- */ --bg: #06070b; --surface: #10141f; --surface-elevated: #171e2e; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text-primary: #f6f8fb; --text-secondary: #aab3c5; --text-tertiary: #838ca1; --accent: #ff5436; --accent-strong: #ff8266; --accent-on: #1a0700; --accent-soft: rgba(255, 84, 54, 0.16); --event-goal: var(--accent); --event-vote: #ffc24b; --event-vote-on: #241300; --event-vote-soft: rgba(255, 194, 75, 0.16); --signal-health: #2fe6c8; --signal-health-soft: rgba(47, 230, 200, 0.14); --signal-location: #8fb8e8; --signal-location-soft: rgba(143, 184, 232, 0.13); --focus-ring: #ffb199; --error: #ff6b57; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px rgba(0, 0, 0, 0.55); --glow-accent: 0 0 48px rgba(255, 84, 54, 0.22); --scrim: rgba(4, 5, 9, 0.72); color-scheme: dark; } :root[data-theme="light"] { /* --------------------------------------------------------------------- THEME TOKENS — light (designed on its own terms, not an inversion) --------------------------------------------------------------------- */ --bg: #f2f4f8; --surface: #ffffff; --surface-elevated: #fbfbfe; --border: rgba(10, 14, 24, 0.10); --border-strong: rgba(10, 14, 24, 0.17); --text-primary: #0b0e14; --text-secondary: #454e60; --text-tertiary: #5f6b85; --accent: #ff5436; --accent-strong: #c53318; --accent-on: #1a0700; --accent-soft: rgba(255, 84, 54, 0.10); --event-goal: var(--accent-strong); --event-vote: #92620a; --event-vote-on: #ffffff; --event-vote-soft: rgba(146, 98, 10, 0.10); --signal-health: #077a68; --signal-health-soft: rgba(7, 122, 104, 0.10); --signal-location: #2f6fb0; --signal-location-soft: rgba(47, 111, 176, 0.10); --focus-ring: #c53318; --error: #c62f1c; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 16px 40px rgba(15, 23, 42, 0.10); --glow-accent: 0 18px 40px rgba(255, 84, 54, 0.16); --scrim: rgba(10, 12, 18, 0.55); color-scheme: light; } /* No-JS / pre-hydration fallback: honor system preference until the toggle script (which sets data-theme explicitly and wins over this) runs. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f2f4f8; --surface: #ffffff; --surface-elevated: #fbfbfe; --border: rgba(10, 14, 24, 0.10); --border-strong: rgba(10, 14, 24, 0.17); --text-primary: #0b0e14; --text-secondary: #454e60; --text-tertiary: #5f6b85; --accent: #ff5436; --accent-strong: #c53318; --accent-on: #1a0700; --accent-soft: rgba(255, 84, 54, 0.10); --event-goal: var(--accent-strong); --event-vote: #92620a; --event-vote-on: #ffffff; --event-vote-soft: rgba(146, 98, 10, 0.10); --signal-health: #077a68; --signal-health-soft: rgba(7, 122, 104, 0.10); --signal-location: #2f6fb0; --signal-location-soft: rgba(47, 111, 176, 0.10); --focus-ring: #c53318; --error: #c62f1c; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 16px 40px rgba(15, 23, 42, 0.10); --glow-accent: 0 18px 40px rgba(255, 84, 54, 0.16); --scrim: rgba(10, 12, 18, 0.55); color-scheme: light; } } :root { /* --------------------------------------------------------------------- CLUB TOKENS — inert on the public landing. Neutral fallbacks so any accidental reference degrades to the FanApp brand instead of breaking. The "Elegí tu club" demo overrides these locally on a small widget only. --------------------------------------------------------------------- */ --club-primary: var(--accent); --club-secondary: var(--surface-elevated); --club-accent: var(--accent-strong); --club-surface: var(--surface-elevated); --club-on-primary: var(--accent-on); } :root { /* --------------------------------------------------------------------- SEMANTIC TOKENS that don't change with theme — type, space, motion --------------------------------------------------------------------- */ --font-display: "Malvinas Sans", "Barlow Condensed", "Arial Narrow", sans-serif; --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --fs-hero: clamp(2.5rem, 2vw + 2.15rem, 4.75rem); --fs-h2: clamp(1.75rem, 1vw + 1.5rem, 2.5rem); --fs-h3: clamp(1.2rem, 0.4vw + 1.05rem, 1.5rem); --fs-lede: clamp(1.0625rem, 0.3vw + 1rem, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --fs-data-lg: clamp(1.5rem, 1.2vw + 1.2rem, 2.25rem); --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.6; --lh-small: 1.5; --tracking-eyebrow: 0.14em; --tracking-display: 0.005em; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6rem; --space-10: 8rem; --container-max: 74rem; --gutter: clamp(1.25rem, 5vw, 3rem); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 900ms; --dur-theme: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --z-header: 100; --nav-panel: 200; --z-tooltip: 300; }