/* ===================================================================== TOKENS — the single source of truth for how the poll looks. Restyling (e.g. to Projector community branding) = change values here. Nothing else in the codebase should contain raw colors, fonts or sizes. ===================================================================== */ /* ===== COLOR — neutral base ===== */ :root { --color-bg: #f5f5f3; --color-surface: #ffffff; --color-surface-muted: #ececea; --color-border: #deded9; --color-border-strong: #c4c4bd; --color-text: #17171b; --color-text-muted: #66666f; --color-accent: #3548fe; --color-accent-soft: #e6e9ff; --color-on-accent: #ffffff; --color-danger: #d92d20; --color-danger-soft: #fdecea; --color-success: #14a44d; /* QR must stay dark-on-light in every theme or phones can't scan it. */ --color-qr-bg: #ffffff; --color-qr-fg: #000000; } /* ===== DERIVED TOKENS — built from the ones above ===== */ /* Declared on every surface, not just :root: a var() inside a custom property is resolved where it's declared, so .surface-stage must re-declare these or it would inherit the light-theme values. */ :root, .surface-stage { --color-track: var(--color-surface-muted); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 40%, transparent); } /* ===== COLOR — roles ===== */ /* Not here on purpose: roles (and their colors) are edited in admin and set at runtime as --role- on by setRoles() in js/config.js. */ /* ===== TYPE ===== */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-numeric: var(--font-sans); --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.625rem; --text-2xl: 2.25rem; /* Stage sizes scale with the projector/window, not the phone */ --text-stage: clamp(1.75rem, 3.4vw, 3.5rem); --text-stage-sm: clamp(1rem, 1.6vw, 1.5rem); --text-display: clamp(3rem, 9vw, 8rem); --weight-regular: 400; --weight-medium: 550; --weight-bold: 700; --leading-tight: 1.15; --leading-normal: 1.5; --tracking-tight: -0.02em; --tracking-caps: 0.08em; } /* ===== SPACE / SHAPE ===== */ :root { --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: 4rem; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --border-width: 1.5px; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06); --shadow-md: 0 8px 24px rgb(0 0 0 / 0.08); --page-max: 34rem; --tap-min: 3.25rem; --bar-height: clamp(1.5rem, 4.5vh, 3rem); } /* ===== MOTION ===== */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 150ms; --t-base: 250ms; --t-slow: 700ms; } /* ===== STAGE SURFACE — black; everything the audience sees ===== */ /* Phones (index.html) and the big screen (results.html). Admin stays light. Only redefines tokens → every component restyles itself automatically. Same accent as light: it's a fill under white text, which reads on black. */ .surface-stage { --color-bg: #000000; --color-surface: #141418; --color-surface-muted: #222228; --color-border: #2a2a31; --color-border-strong: #41414b; --color-text: #f4f4f6; --color-text-muted: #a0a0ad; --color-accent: #3548fe; --color-accent-soft: #11174a; --color-danger: #ff7a6e; --color-danger-soft: #3b1f1e; }