/* ============================================================ FLASH TV — MATERIAL DESIGN 3 THEME (dark) ------------------------------------------------------------ The single token file for the Flash TV app (M3, dark). Defines the CSS variables styles.css consumes — Material 3 tonal color roles, brand fonts mapped to M3 roles, shape scale, elevation, motion, and the TV-scaled M3 type scale. Gold-seeded M3 dark scheme. Loaded by index.html. Dark-only. ============================================================ */ /* Option B — brand fonts mapped to M3 roles (Oswald display + Work Sans UI), M3 structure & sentence case retained via m3-overrides.css */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700;800&display=swap'); :root { /* Root anchor for rem-based type. 1rem = 16px (standard root). The M3 type scale below is authored as rem = sp / 16 (the standard web ratio, 16sp = 1rem), i.e. 1sp = 1px — sizes render 1×: display-large 44sp → 44px. */ font-size: 16px; /* --------------------------------------------------------- M3 COLOR ROLES (dark scheme, gold-seeded) --------------------------------------------------------- */ --m3-primary: #F8BD49; --m3-on-primary: #422C00; --m3-primary-container: #5E4100; --m3-on-primary-container: #FFE0A3; --m3-inverse-primary: #7C5800; --m3-secondary: #DBC4A0; --m3-on-secondary: #3E2D16; --m3-secondary-container: #55442F; --m3-on-secondary-container:#F8DFBC; --m3-tertiary: #A6D2B0; --m3-on-tertiary: #133821; --m3-tertiary-container: #2A4E36; --m3-on-tertiary-container: #C2EDCC; --m3-error: #FFB4AB; --m3-on-error: #690005; --m3-error-container: #93000A; --m3-on-error-container: #FFDAD6; /* ── Extended (Brand) colors — M3 custom colors ─────────────── Flash brand roles that aren't core M3 roles, modeled as M3 custom colors (full color/on/container/on-container sets) so they extend the theme. Premium is kept bold (vivid cobalt) by design. Per Color.kt the role splits into a LIGHT tone (--premium #B2C5FF) and the bold cobalt SURFACE (--premium-container #3D5BFF); bold-cobalt fills in the app use the container pair. */ --premium: #B2C5FF; /* Voltage Cobalt — light tone */ --on-premium: #00228F; --premium-container: #3D5BFF; /* bold cobalt premium surface */ --on-premium-container: #E0E2FF; --highlight: #C7FF5C; /* Spark */ --on-highlight: #283900; --highlight-container: #3C5300; --on-highlight-container:#D6FF85; --royal: #C7B7FF; /* M3 "team" custom color */ --on-royal: #2E1581; --royal-container: #452D98; --on-royal-container: #E7E0FF; --m3-background: #141414; --m3-on-background: #E5E1E6; --m3-surface: #141414; --m3-on-surface: #E5E1E6; --m3-surface-variant: #252423; --m3-on-surface-variant: #C9C6C4; --m3-border: #94908C; /* tv.material3 ColorScheme.border */ --m3-border-variant: #484745; /* tv.material3 ColorScheme.borderVariant */ --m3-inverse-surface: #E5E1E6; --m3-inverse-on-surface: #141414; --m3-scrim: #000000; /* State-layer opacities (M3) */ --m3-state-hover: 0.08; --m3-state-focus: 0.10; --m3-state-pressed: 0.12; /* --------------------------------------------------------- INK SCALE → M3 surfaces / outlines (these names are what styles.css actually reads) --------------------------------------------------------- */ --lpl-ink-900: var(--m3-surface); /* page bg → surface */ --lpl-ink-800: var(--m3-surface-variant); /* card / app surface → surface-variant */ --lpl-ink-700: var(--m3-surface-variant); /* elevated surface → surface-variant */ --lpl-ink-600: color-mix(in srgb, var(--m3-on-surface) 8%, var(--m3-surface-variant)); /* hover/pressed = M3 state layer over surface-variant */ --lpl-ink-500: var(--m3-border-variant); /* borders, dividers */ --lpl-ink-400: var(--m3-border); /* muted lines */ --lpl-ink-300: color-mix(in srgb, var(--m3-border) 70%, var(--m3-border-variant)); /* --------------------------------------------------------- BRAND ACCENTS → all derived from M3 primary (gold). The legacy lime/gold ramp steps are aliased to primary tints/shades so nothing in the alias layer is a raw literal. --------------------------------------------------------- */ --lpl-lime-300: color-mix(in srgb, var(--m3-primary) 55%, white); --lpl-lime-400: color-mix(in srgb, var(--m3-primary) 80%, white); --lpl-lime-500: var(--m3-primary); /* ★ primary CTA / active */ --lpl-lime-600: color-mix(in srgb, var(--m3-primary) 82%, black); --lpl-lime-700: color-mix(in srgb, var(--m3-primary) 65%, black); --lpl-gold-300: color-mix(in srgb, var(--m3-primary) 55%, white); --lpl-gold-400: color-mix(in srgb, var(--m3-primary) 80%, white); --lpl-gold-500: var(--m3-primary); --lpl-gold-600: color-mix(in srgb, var(--m3-primary) 78%, black); /* Team chrome → M3 royal custom role (light → container) */ --lpl-royal-400: var(--royal); --lpl-royal-500: var(--royal); --lpl-royal-600: var(--royal-container); --lpl-royal-700: var(--royal-container); /* Semantic */ --lpl-live: var(--m3-error); --lpl-success: var(--m3-tertiary); --lpl-warning: var(--m3-on-primary-container); --lpl-info: var(--on-premium-container); /* --------------------------------------------------------- TEXT → M3 on-surface roles --------------------------------------------------------- */ --lpl-text-hi: var(--m3-on-surface); --lpl-text-mid: var(--m3-on-surface-variant); --lpl-text-low: var(--m3-border); /* low-emphasis text (inactive nav, captions) — M3 border role */ --lpl-text-faint: var(--m3-border); --fg-1: var(--lpl-text-hi); --fg-2: var(--lpl-text-mid); --fg-3: var(--lpl-text-low); --fg-4: var(--lpl-text-faint); --bg-page: var(--lpl-ink-900); --bg-surface: var(--lpl-ink-800); --bg-raised: var(--lpl-ink-700); --bg-pressed: var(--lpl-ink-600); --border-line: var(--lpl-ink-500); --border-mute: var(--lpl-ink-400); /* --------------------------------------------------------- TYPE — Roboto (M3 standard typeface) --------------------------------------------------------- */ --font-display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif; --font-heading: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale (kept; the app sizes most type inline) */ --fs-display-xl: 52px; --lh-display-xl: 58px; --fs-display-lg: 40px; --lh-display-lg: 48px; --fs-display-md: 30px; --lh-display-md: 38px; --fs-h1: 26px; --lh-h1: 32px; --fs-h2: 20px; --lh-h2: 26px; --fs-h3: 18px; --lh-h3: 24px; --fs-body-lg: 16px; --lh-body-lg: 24px; --fs-body: 14px; --lh-body: 20px; --fs-caption: 12px; --lh-caption: 16px; --fs-micro: 10px; --lh-micro: 14px; /* M3 tracking is near-zero (sentence case, no wide caps) */ --tracking-display: 0; --tracking-heading: 0; --tracking-label: 0.01em; --tracking-tight: 0; --tracking-body: 0.0125em; /* --------------------------------------------------------- SPACING — 4dp grid (unchanged) --------------------------------------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* --------------------------------------------------------- SHAPE SCALE (M3) --------------------------------------------------------- */ --r-sm: 8px; /* extra-small/small */ --r-md: 12px; /* medium */ --r-lg: 16px; /* large (cards) */ --r-xl: 20px; /* large+ (hero) */ --r-2xl: 28px; /* extra-large (dialogs) */ --r-pill: 999px; /* full (buttons, nav indicator) */ /* --------------------------------------------------------- ELEVATION — M3 dark leans on tonal surfaces; shadows soft --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.15); --shadow-md: 0 2px 6px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.22); --shadow-lg: 0 8px 24px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30); --shadow-glow-lime: 0 0 0 3px rgba(248,189,73,.40); --shadow-glow-gold: 0 0 0 3px rgba(248,189,73,.40); --shadow-glow-live: 0 0 0 3px rgba(255,180,171,.45); /* --------------------------------------------------------- MOTION (M3 tokens) --------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --ease-out-quart: cubic-bezier(0.05, 0.7, 0.1, 1.0); /* emphasized decelerate */ --ease-in-out: cubic-bezier(0.2, 0.0, 0, 1.0); /* standard */ --ease-spring: cubic-bezier(0.3, 0.0, 0.8, 0.15); /* emphasized accelerate */ /* --------------------------------------------------------- M3 TYPE SCALE — rem, mapped from Compose Typography.kt (sp). ------------------------------------------------------------ Root is 16px (1rem = 16px). Each role = sp / 16 rem (the standard web ratio, 16sp = 1rem), i.e. 1sp = 1px — sizes render 1×: e.g. display-large 44sp → 2.75rem → 44px. Line-heights are unitless ratios (sp-line ÷ sp-size); weights + tracking match Typography.kt. label-small (12sp) is the floor. CASING: base roles are SENTENCE case (M3 default) — Display/Headline/title-large = Oswald, title-medium/-small + Body + Label = Work Sans. The app's UPPERCASE broadcast look comes from "emphasized" variants layered in styles.css (uppercase + wider track): rail-title = title-large (emph), button = label-large (emph), micro labels = label-small (emph), plus the display/headline page titles. The component→role map lives in the last block of styles.css. */ --m3-display-large-size: 2.75rem; --m3-display-large-line: 1.18; --m3-display-large-weight: 700; --m3-display-medium-size: 2.5rem; --m3-display-medium-line: 1.20; --m3-display-medium-weight: 700; --m3-display-small-size: 2rem; --m3-display-small-line: 1.25; --m3-display-small-weight: 600; --m3-headline-large-size: 1.75rem; --m3-headline-large-line: 1.29; --m3-headline-large-weight: 600; --m3-headline-medium-size: 1.5rem; --m3-headline-medium-line: 1.33; --m3-headline-medium-weight: 600; --m3-headline-small-size: 1.3125rem; --m3-headline-small-line: 1.33; --m3-headline-small-weight: 600; --m3-title-large-size: 1.125rem; --m3-title-large-line: 1.33; --m3-title-large-weight: 500; --m3-title-large-track: 0.06em; --m3-title-medium-size: 0.9375rem; --m3-title-medium-line: 1.33; --m3-title-medium-weight: 600; --m3-title-small-size: 0.8125rem; --m3-title-small-line: 1.39; --m3-title-small-weight: 600; --m3-label-large-size: 1rem; --m3-label-large-line: 1.38; --m3-label-large-weight: 600; --m3-label-large-track: 0.06em; --m3-label-medium-size: 0.875rem; --m3-label-medium-line: 1.36; --m3-label-medium-weight: 600; --m3-label-medium-track: 0.04em; --m3-label-small-size: 0.75rem; --m3-label-small-line: 1.33; --m3-label-small-weight: 600; --m3-label-small-track: 0.06em; --m3-body-large-size: 1rem; --m3-body-large-line: 1.38; --m3-body-large-weight: 400; --m3-body-medium-size: 0.875rem; --m3-body-medium-line: 1.36; --m3-body-medium-weight: 400; --m3-body-small-size: 0.75rem; --m3-body-small-line: 1.33; --m3-body-small-weight: 400; }