/* ============================================================ PLAYERENCE — VISUAL REFRESH STYLESHEET Version: 1.0 (Apr 2026) Purpose: drop-in re-skin only. This file changes: • Brand colours (blue + orange anchors) • Neutral palette (cool-toned greys) • Type stack (Inter + JetBrains Mono) • Light + dark themes • Focus rings, motion, hit-target floor This file does NOT change: • Markup or component structure • Spacing or layout • User flows or interactions Load order: 1. Reset / vendor (if any) 2. THIS FILE 3. App/component CSS that consumes the tokens Theme switching: ← default ← night mode Toggle via JS by swapping the class on ; persist in localStorage. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ GLOBAL TOKENS — theme-independent ============================================================ */ :root { /* -------- BRAND ANCHORS -------- */ --brand-blue: #00A3E0; /* C100 M27 Y0 K12 */ --brand-orange: #FF6C2F; /* C0 M58 Y82 K0 */ /* -------- BRAND BLUE SCALE -------- */ --blue-50: #E5F6FC; --blue-100: #C7ECF8; --blue-200: #8FD9F1; --blue-300: #4FC3E8; --blue-400: #1FB1E2; --blue-500: #00A3E0; /* anchor — fills only, 2.97:1 on white */ --blue-600: #0089BD; /* AA on white — body & icons */ --blue-700: #006D97; /* AAA on white */ --blue-800: #005374; --blue-900: #003B53; /* -------- BRAND ORANGE SCALE -------- */ --orange-50: #FFF1EA; --orange-100: #FFE0D0; --orange-200: #FFC0A1; --orange-300: #FF9D6F; --orange-400: #FF8550; --orange-500: #FF6C2F; /* anchor */ --orange-600: #E25316; /* AA on white */ --orange-700: #B53F0A; /* AAA on white */ --orange-800: #832D05; --orange-900: #531C02; /* -------- NEUTRAL — cool-toned -------- */ --neutral-0: #FFFFFF; --neutral-25: #FAFCFE; --neutral-50: #F5F8FB; --neutral-100: #EDF2F7; --neutral-200: #DCE4ED; --neutral-300: #C2CDD9; --neutral-400: #9AA7B5; --neutral-500: #6F7D8D; --neutral-600: #51606F; --neutral-700: #3A4754; --neutral-800: #25303B; --neutral-900: #161D25; --neutral-1000: #0A0E13; /* -------- SEMANTIC -------- */ --success-500: #1F9E5C; --success-600: #16834C; --warning-500: #D9821A; --warning-600: #B66A0F; --danger-500: #DC2A2A; --danger-600: #B91D1D; --info-500: var(--blue-500); /* -------- TYPE -------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 40px; --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* -------- SPACING (4px base) -------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; /* -------- RADII -------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* -------- MOTION -------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.6, 0, 0.85, 0.35); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* -------- ACCESSIBILITY FLOOR -------- */ --hit-min: 44px; /* -------- LAYERS -------- */ --z-base: 0; --z-sticky: 10; --z-overlay: 50; --z-modal: 100; --z-toast: 200; } /* ============================================================ THEME — LIGHT (default) ============================================================ */ .theme-light, :root:not(.theme-dark) { --bg-canvas: var(--neutral-50); --bg-surface: var(--neutral-0); --bg-surface-alt: var(--neutral-25); --bg-sunken: var(--neutral-100); --bg-tint-blue: var(--blue-50); --bg-tint-orange: var(--orange-50); --fg-primary: var(--neutral-900); --fg-secondary: var(--neutral-700); --fg-tertiary: var(--neutral-500); --fg-disabled: var(--neutral-400); --fg-on-brand: #FFFFFF; --border-subtle: var(--neutral-100); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-focus: var(--blue-500); /* Buttons */ --action-primary-bg: var(--blue-500); --action-primary-bg-hover: var(--blue-600); --action-primary-fg: #FFFFFF; --action-accent-bg: var(--orange-500); --action-accent-bg-hover: var(--orange-600); --action-accent-fg: #FFFFFF; --action-dark-bg: var(--neutral-900); --action-dark-bg-hover: var(--neutral-800); --action-dark-fg: #FFFFFF; --action-ghost-fg: var(--neutral-700); --action-ghost-bg-hover: var(--neutral-100); /* Toggle */ --toggle-on: var(--orange-500); --toggle-off: var(--neutral-300); --toggle-thumb: #FFFFFF; /* Badges */ --badge-neutral-bg: #EDF2F7; --badge-neutral-fg: #3A4754; --badge-blue-bg: #C7ECF8; --badge-blue-fg: #005374; --badge-orange-bg: #FFE0D0; --badge-orange-fg: #832D05; --badge-success-bg: #C7EBD7; --badge-success-fg: #0F5B36; --badge-danger-bg: #FBD3D3; --badge-danger-fg: #8A1414; /* Shadows */ --shadow-xs: 0 1px 2px rgba(22,29,37,0.04); --shadow-sm: 0 1px 3px rgba(22,29,37,0.06), 0 1px 2px rgba(22,29,37,0.04); --shadow-md: 0 4px 12px rgba(22,29,37,0.07), 0 2px 4px rgba(22,29,37,0.05); --shadow-lg: 0 12px 32px rgba(22,29,37,0.10), 0 4px 8px rgba(22,29,37,0.06); --shadow-focus: 0 0 0 3px rgba(0,163,224,0.35); --shadow-focus-orange: 0 0 0 3px rgba(255,108,47,0.35); color-scheme: light; } /* ============================================================ THEME — DARK ============================================================ */ .theme-dark { --bg-canvas: #0E141A; --bg-surface: #1A222C; --bg-surface-alt: #232D38; --bg-sunken: #0A0F14; --bg-tint-blue: rgba(0,163,224,0.14); --bg-tint-orange: rgba(255,108,47,0.14); --fg-primary: #F4F7FA; /* AAA on canvas */ --fg-secondary: #D2DAE3; /* AAA */ --fg-tertiary: #A6B2BE; /* AAA */ --fg-disabled: #6F7D8D; --fg-on-brand: #FFFFFF; --border-subtle: #243039; --border-default: #354554; --border-strong: #4A5C6E; --border-focus: var(--blue-300); /* Buttons — coloured fills use white labels in dark */ --action-primary-bg: var(--blue-600); --action-primary-bg-hover: var(--blue-500); --action-primary-fg: #FFFFFF; --action-accent-bg: var(--orange-600); --action-accent-bg-hover: var(--orange-500); --action-accent-fg: #FFFFFF; --action-dark-bg: #FFFFFF; --action-dark-bg-hover: #E6ECF2; --action-dark-fg: #0A0F14; --action-ghost-fg: #D2DAE3; --action-ghost-bg-hover: #243039; --toggle-on: var(--orange-500); --toggle-off: #4A5C6E; --toggle-thumb: #FFFFFF; --badge-neutral-bg: #354554; --badge-neutral-fg: #F4F7FA; --badge-blue-bg: #0F4D6B; --badge-blue-fg: #C7ECF8; --badge-orange-bg: #6B2A0E; --badge-orange-fg: #FFD8C2; --badge-success-bg: #0E5234; --badge-success-fg: #C2EAD5; --badge-danger-bg: #5C1414; --badge-danger-fg: #FFCDCD; --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4); --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4); --shadow-focus: 0 0 0 3px rgba(79,195,232,0.45); --shadow-focus-orange: 0 0 0 3px rgba(255,133,80,0.45); color-scheme: dark; } /* Auto-respect OS preference if no explicit class is set */ @media (prefers-color-scheme: dark) { :root:not(.theme-light):not(.theme-dark) { color-scheme: dark; /* Mirror .theme-dark — keep these in sync if you edit dark above */ --bg-canvas: #0E141A; --bg-surface: #1A222C; --bg-surface-alt: #232D38; --bg-sunken: #0A0F14; --bg-tint-blue: rgba(0,163,224,0.14); --bg-tint-orange: rgba(255,108,47,0.14); --fg-primary: #F4F7FA; --fg-secondary: #D2DAE3; --fg-tertiary: #A6B2BE; --fg-disabled: #6F7D8D; --fg-on-brand: #FFFFFF; --border-subtle: #243039; --border-default: #354554; --border-strong: #4A5C6E; --border-focus: var(--blue-300); --action-primary-bg: var(--blue-600); --action-primary-bg-hover: var(--blue-500); --action-primary-fg: #FFFFFF; --action-accent-bg: var(--orange-600); --action-accent-bg-hover: var(--orange-500); --action-accent-fg: #FFFFFF; --action-dark-bg: #FFFFFF; --action-dark-bg-hover: #E6ECF2; --action-dark-fg: #0A0F14; --action-ghost-fg: #D2DAE3; --action-ghost-bg-hover: #243039; --toggle-off: #4A5C6E; --shadow-focus: 0 0 0 3px rgba(79,195,232,0.45); } } /* ============================================================ GLOBAL — accessibility & type baseline ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Numerics — opt-in mono. Apply via class="num" on stat values. */ .num, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Selection */ ::selection { background: var(--blue-200); color: var(--neutral-900); } .theme-dark ::selection { background: var(--blue-700); color: #FFFFFF; } /* Placeholder colour follows fg-tertiary so it's legible in both themes */ ::placeholder { color: var(--fg-tertiary); opacity: 1; } /* Scrollbar — subtle, theme-aware */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } /* Skip-link helper */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ TRANSITIONAL RE-SKIN HOOKS These map common legacy patterns onto the new tokens so the first PR can reskin without touching component markup. Tighten to your actual class names; remove once tokens are adopted directly in component CSS. ============================================================ */ /* App chrome */ body, .app-shell, .page, .main { background: var(--bg-canvas); color: var(--fg-primary); } /* Cards / panels */ .card, .panel, .surface, .modal-content, .dialog { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--fg-primary); } /* Buttons — primary (brand blue) */ .btn-primary, button.primary, .button--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); border: 0; border-radius: var(--r-md); min-height: var(--hit-min); padding: 0 var(--sp-5); font-family: var(--font-sans); font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .btn-primary:hover, button.primary:hover, .button--primary:hover { background: var(--action-primary-bg-hover); } /* Buttons — accent (brand orange) */ .btn-accent, .button--accent, .btn-orange { background: var(--action-accent-bg); color: var(--action-accent-fg); border: 0; border-radius: var(--r-md); min-height: var(--hit-min); padding: 0 var(--sp-5); font-weight: var(--fw-semibold); } .btn-accent:hover, .button--accent:hover, .btn-orange:hover { background: var(--action-accent-bg-hover); } /* Buttons — dark (player Play pill) */ .btn-dark, .button--dark, .play-btn { background: var(--action-dark-bg); color: var(--action-dark-fg); border: 0; border-radius: var(--r-pill); min-height: var(--hit-min); padding: 0 var(--sp-7); font-weight: var(--fw-semibold); } /* Buttons — secondary / ghost */ .btn-secondary, .button--secondary { background: var(--bg-surface); color: var(--fg-primary); border: 1px solid var(--border-default); border-radius: var(--r-md); min-height: var(--hit-min); } .btn-ghost, .button--ghost { background: transparent; color: var(--action-ghost-fg); border: 0; min-height: var(--hit-min); } .btn-ghost:hover { background: var(--action-ghost-bg-hover); } /* Inputs */ input, select, textarea { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--fg-primary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 0 var(--sp-3); min-height: var(--hit-min); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } textarea { padding: var(--sp-3); min-height: 96px; } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; } input:disabled, select:disabled, textarea:disabled { color: var(--fg-disabled); background: var(--bg-sunken); cursor: not-allowed; } /* Toggle switches — orange ON to match the live spec */ .toggle, .switch { --_w: 36px; --_h: 20px; width: var(--_w); height: var(--_h); border-radius: var(--r-pill); background: var(--toggle-off); position: relative; transition: background var(--dur-base) var(--ease-out); cursor: pointer; } .toggle.is-on, .switch[aria-checked="true"], .switch.on { background: var(--toggle-on); } .toggle::after, .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px); background: var(--toggle-thumb); border-radius: 50%; transition: transform var(--dur-base) var(--ease-out); } .toggle.is-on::after, .switch[aria-checked="true"]::after, .switch.on::after { transform: translateX(calc(var(--_w) - var(--_h))); } /* Badges */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); } .badge--blue { background: var(--badge-blue-bg); color: var(--badge-blue-fg); } .badge--orange { background: var(--badge-orange-bg); color: var(--badge-orange-fg); } .badge--success { background: var(--badge-success-bg); color: var(--badge-success-fg); } .badge--danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); } /* Links */ a { color: var(--blue-600); text-decoration: none; } a:hover { text-decoration: underline; } .theme-dark a { color: var(--blue-300); } /* Headings — only sets type stack & weight, not size; leave existing scale alone */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--fg-primary); text-wrap: balance; } /* Stat counters — opt-in via .stat-value or wrap numeric output in .num */ .stat-value, .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Table chrome (analytics) */ table { border-collapse: collapse; color: var(--fg-primary); } th, td { border-bottom: 1px solid var(--border-subtle); } th { color: var(--fg-tertiary); font-weight: var(--fw-medium); text-align: left; }