/* Design tokens: una única fuente de verdad para color, tipografía, espaciado y radios. Los tamaños usan rem para que el "modo TV" (10-foot UI) escale todo cambiando font-size en . */ :root { --bg: #141414; --bg-elev: #1b1b1b; --surface: #232323; --surface-2: #2e2e2e; --surface-hover: #3a3a3a; --border: rgba(255, 255, 255, 0.10); --text: #ffffff; --text-2: #b3b3b3; --text-3: #777777; --accent: #e50914; --accent-hover: #f6121d; --accent-soft: rgba(229, 9, 20, 0.18); --success: #46d369; --warning: #f5c518; --danger: #e50914; --live: #e50914; --focus: #ffffff; --overlay: rgba(0, 0, 0, 0.6); --overlay-strong: rgba(0, 0, 0, 0.85); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: 2.5rem; --fs-hero: clamp(1.75rem, 4vw, 3.5rem); --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --nav-h: 56px; --gutter: var(--sp-4); --card-w: 150px; --card-w-wide: 220px; --card-w-channel: 150px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7); --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur: 180ms; /* Framework7 overrides */ --f7-font-family: var(--font); --f7-page-bg-color: var(--bg); --f7-bars-bg-color: var(--bg); --f7-theme-color: var(--accent); --f7-theme-color-rgb: 229, 9, 20; --f7-theme-color-shade: #b8070f; --f7-theme-color-tint: #ff3b46; --f7-text-color: var(--text); --f7-list-bg-color: var(--surface); --f7-list-item-border-color: var(--border); --f7-block-strong-bg-color: var(--surface); --f7-dialog-bg-color: var(--surface); --f7-dialog-text-color: var(--text); --f7-dialog-title-text-color: var(--text); --f7-popover-bg-color: var(--surface); --f7-sheet-bg-color: var(--surface); --f7-popup-bg-color: var(--bg); --f7-toast-bg-color: rgba(40, 40, 40, 0.96); --f7-toast-text-color: var(--text); --f7-input-text-color: var(--text); --f7-input-placeholder-color: var(--text-3); --f7-label-text-color: var(--text-2); --f7-preloader-color: var(--accent); --f7-toggle-active-color: var(--accent); --f7-safe-area-left: env(safe-area-inset-left); --f7-safe-area-right: env(safe-area-inset-right); } @media (min-width: 900px) { :root { --gutter: 3.5vw; --card-w: 190px; --card-w-wide: 280px; --card-w-channel: 220px; --nav-h: 64px; } } @media (min-width: 1400px) { :root { --card-w: 210px; --card-w-wide: 320px; --card-w-channel: 240px; } }