/* ------------------------------------------------------------------ variables.css — design tokens. Every colour, size and duration in the app resolves to something in this file. Changing the theme means changing this file and nothing else, which is what makes the Appearance setting in Phase 13 cheap. Sizes are expressed in px against a 1920x1080 CSS viewport, which is what most VIDAA sets report. responsive-tv.css scales the whole system for a set that reports a genuine 3840px viewport. ------------------------------------------------------------------ */ :root { /* ---- colour ---- */ --c-bg: #0B0F14; --c-bg-elevated: #10161D; --c-surface: #151B23; --c-surface-2: #1D2631; --c-surface-3: #273140; --c-line: #2A3442; /* The brand red stays a brand red — a logo mark, a live badge, a progress bar — never a large filled surface. A saturated red button glows on a TV at three metres and drags the eye away from whatever is focused. */ --c-accent: #E50914; --c-accent-soft: #B0242B; --c-primary: #E50914; /* kept for the mark */ --c-primary-dim: #A5070F; /* A primary action reads as the brightest neutral, not the loudest hue. */ --c-action: #ECEFF3; --c-action-text: #0A0D11; --c-text: #FFFFFF; --c-text-dim: #9CA3AF; --c-text-faint: #6B7280; --c-focus: #FFFFFF; --c-ok: #22C55E; --c-warn: #F59E0B; --c-bad: #EF4444; --c-scrim: rgba(0, 0, 0, 0.72); --c-scrim-soft: rgba(11, 15, 20, 0.86); /* ---- type scale ---- Nothing below --fs-sm is allowed in a screen. At three metres, 18px is already close to the floor of comfortable reading. */ --fs-xs: 16px; --fs-sm: 20px; --fs-base: 24px; --fs-md: 28px; --fs-lg: 34px; --fs-xl: 44px; --fs-2xl: 56px; --fs-3xl: 72px; --lh-tight: 1.15; --lh-base: 1.45; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ---- spacing ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- title-safe area ---- TV panels overscan. Nothing important goes outside this inset. */ --safe-x: 64px; --safe-y: 40px; /* ---- elevation ---- Two layers: a tight contact shadow so an element sits on the surface, and a wide soft one so it lifts off it. One alone always looks either pasted on or detached. */ --shadow-1: 0 1px 2px rgba(0,0,0,0.40), 0 3px 10px rgba(0,0,0,0.20); --shadow-2: 0 2px 4px rgba(0,0,0,0.45), 0 10px 28px rgba(0,0,0,0.32); --shadow-focus: 0 4px 10px rgba(0,0,0,0.50), 0 18px 46px rgba(0,0,0,0.48); /* ---- shape ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* ---- focus ring ---- Thin but bright. A heavy ring reads as a border on the artwork itself and eats into the poster; at full white a 2px line plus the lift and the drop shadow is already unmistakable from the sofa. */ --focus-width: 2px; /* Thickness of the accent bar seated inside a focused button's bottom edge. Inset like the ring, so it cannot be clipped. */ --focus-accent: 3px; --focus-scale: 1.03; /* Room a focused item needs beyond its own box. The ring itself is inset so it can never be clipped; this covers only the growth from scale() — half of 3% of the widest tile — so scroll containers reserve it as padding and claw it back with a negative margin. */ --focus-bleed: 12px; /* ---- motion ---- Short and transform/opacity only. Anything that triggers layout at 60fps on a TV SoC will drop frames. */ --t-fast: 110ms; --t-base: 180ms; --t-slow: 280ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* ---- layering ---- */ --z-player: 0; --z-app: 10; --z-nav: 20; --z-overlay: 100; --z-dialog: 200; --z-toast: 300; --z-debug: 400; /* ---- chrome ---- */ /* The rail. Icon-only, so the width is the glyph plus breathing room; it replaced --nav-h when the nav became vertical. */ --nav-w: 84px; --nav-item-h: 60px; /* Cast avatar diameter. Width and height are both driven from this, or the image comes out an ellipse the moment the tile has any padding. */ --person-size: 120px; /* Multiplier on every SVG glyph's authored size (see .icon). 1 at 1080p; responsive-tv.css raises it with the type scale on a 4K viewport. */ --icon-scale: 1; } /* Reduced motion is a real accessibility setting and also a useful escape hatch if animation turns out to be expensive on this TV. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --focus-scale: 1; } } /* ------------------------------------------------------------------ Themes. Each is a complete palette, selected by data-theme on . Only options that genuinely change the interface are offered in Settings — a picker with one entry is a dead control. ------------------------------------------------------------------ */ /* Deeper blacks: on an OLED panel the default greys glow in a dark room. */ :root[data-theme="midnight"] { --c-bg: #000000; --c-bg-elevated: #06080B; --c-surface: #0B0E12; --c-surface-2: #12161C; --c-surface-3: #1A2028; --c-line: #1E242C; --c-text-dim: #8A93A0; } /* Higher contrast: brighter text, heavier focus, flatter surfaces. For a bright room or anyone who finds the default too low-contrast. */ :root[data-theme="contrast"] { --c-bg: #000000; --c-surface: #16181C; --c-surface-2: #24272E; --c-surface-3: #343941; --c-line: #4A505A; --c-text: #FFFFFF; --c-text-dim: #C9D1DB; --c-text-faint: #A0A8B4; --focus-width: 4px; } /* ------------------------------------------------------------------ Interface size. Sitting three metres away, the single most useful accessibility control is simply bigger text. ------------------------------------------------------------------ */ :root[data-scale="large"] { --fs-xs: 20px; --fs-sm: 24px; --fs-base: 29px; --fs-md: 34px; --fs-lg: 41px; --fs-xl: 53px; --fs-2xl: 66px; --fs-3xl: 84px; } @media (min-width: 2560px) { :root[data-scale="large"] { --fs-xs: 34px; --fs-sm: 44px; --fs-base: 50px; --fs-md: 60px; --fs-lg: 72px; --fs-xl: 94px; --fs-2xl: 118px; --fs-3xl: 154px; } }