/* ============================================================================ TubeTrends — Material Design 3 theme tokens Seed: #3E4D6B (editorial indigo/slate) · SchemeTonalSpot Color role values are GENERATED (material-dynamic-colors). Do not hand-edit them; regenerate from the seed. Beer CSS and app.css both consume these. Light is the default (:root) so a class-less SSR render is light; the pre- paint inline script in base.html adds .light/.dark to to avoid FOUC. ============================================================================ */ :root, html.light, body.light { --primary: #2e5da8; --on-primary: #ffffff; --primary-container: #d7e2ff; --on-primary-container: #001a40; --secondary: #565e71; --on-secondary: #ffffff; --secondary-container: #dae2f9; --on-secondary-container: #131c2c; --tertiary: #705574; --on-tertiary: #ffffff; --tertiary-container: #fbd7fc; --on-tertiary-container: #29132e; --error: #ba1a1a; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #410002; --background: #fefbff; --on-background: #1b1b1f; --surface: #faf9fd; --on-surface: #1b1b1f; --surface-variant: #e0e2ec; --on-surface-variant: #44474e; --outline: #74777f; --outline-variant: #c4c6d0; --shadow: #000000; --scrim: #000000; --inverse-surface: #2f3033; --inverse-on-surface: #f2f0f4; --inverse-primary: #acc7ff; --surface-dim: #dbd9dd; --surface-bright: #faf9fd; --surface-container-lowest: #ffffff; --surface-container-low: #f4f3f7; --surface-container: #efedf1; --surface-container-high: #e9e7ec; --surface-container-highest: #e3e2e6; --surface-tint: var(--primary); } html.dark, body.dark { --primary: #acc7ff; --on-primary: #002f67; --primary-container: #09458e; --on-primary-container: #d7e2ff; --secondary: #bec6dc; --on-secondary: #283041; --secondary-container: #3f4759; --on-secondary-container: #dae2f9; --tertiary: #ddbcdf; --on-tertiary: #3f2844; --tertiary-container: #573e5b; --on-tertiary-container: #fbd7fc; --error: #ffb4ab; --on-error: #690005; --error-container: #93000a; --on-error-container: #ffb4ab; --background: #1b1b1f; --on-background: #e3e2e6; --surface: #121316; --on-surface: #e3e2e6; --surface-variant: #44474e; --on-surface-variant: #c4c6d0; --outline: #8e9099; --outline-variant: #44474e; --shadow: #000000; --scrim: #000000; --inverse-surface: #e3e2e6; --inverse-on-surface: #2f3033; --inverse-primary: #2e5da8; --surface-dim: #121316; --surface-bright: #38393c; --surface-container-lowest: #0d0e11; --surface-container-low: #1b1b1f; --surface-container: #1f1f23; --surface-container-high: #292a2d; --surface-container-highest: #343538; --surface-tint: var(--primary); } /* ── Semantic data-viz tokens (rising / falling / warning) — theme-aware ─── Preserve the editorial color coding (green = rising attention, red = falling, amber = caution) while giving each a dark-scheme variant. */ :root, html.light, body.light { --rising: #15803d; --rising-container: #dcfce7; --on-rising-container: #0f3d22; --falling: #b3261e; --falling-container: #fce8e6; --on-falling-container: #5c1411; --warning: #9a6700; --warning-container: #fdf0d2; --on-warning-container: #4a3000; } html.dark, body.dark { --rising: #6ee7a8; --rising-container: #14342338; --on-rising-container: #b7f0cd; --falling: #ffb4ab; --falling-container: #5c141438; --on-falling-container: #ffd9d4; --warning: #fbce6a; --warning-container: #4a300038; --on-warning-container: #ffe6b0; } /* ── M3 system tokens (not derived from the seed) ───────────────────────── */ :root { /* Typeface */ --md-ref-typeface-plain: "Google Sans Flex", "Google Sans", system-ui, -apple-system, sans-serif; --md-ref-typeface-brand: "Google Sans Flex", "Google Sans", system-ui, sans-serif; /* Shape scale */ --md-shape-corner-extra-small: 4px; --md-shape-corner-small: 8px; --md-shape-corner-medium: 12px; --md-shape-corner-large: 16px; --md-shape-corner-extra-large: 28px; --md-shape-corner-full: 999px; /* Elevation (M3 reference shadows) */ --md-elevation-0: none; --md-elevation-1: 0 1px 2px 0 rgb(0 0 0 / 0.30), 0 1px 3px 1px rgb(0 0 0 / 0.15); --md-elevation-2: 0 1px 2px 0 rgb(0 0 0 / 0.30), 0 2px 6px 2px rgb(0 0 0 / 0.15); --md-elevation-3: 0 1px 3px 0 rgb(0 0 0 / 0.30), 0 4px 8px 3px rgb(0 0 0 / 0.15); --md-elevation-4: 0 2px 3px 0 rgb(0 0 0 / 0.30), 0 6px 10px 4px rgb(0 0 0 / 0.15); --md-elevation-5: 0 4px 4px 0 rgb(0 0 0 / 0.30), 0 8px 12px 6px rgb(0 0 0 / 0.15); /* Motion — easing */ --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* Motion — duration */ --md-motion-duration-short: 100ms; --md-motion-duration-medium: 250ms; --md-motion-duration-long: 400ms; --md-motion-duration-extra-long: 550ms; /* State-layer opacities */ --md-state-hover: 0.08; --md-state-focus: 0.10; --md-state-pressed: 0.10; --md-state-dragged: 0.16; } /* ── Pico → M3 bridge ─────────────────────────────────────────────────────── app.css and login.html still reference these 7 custom properties. Mapping them to M3 roles lets the entire bespoke editorial stylesheet inherit the new palette without a mass find-and-replace. They are retired per-component as each stage reskins its area. */ :root { --pico-primary: var(--primary); --pico-color: var(--on-surface); --pico-muted-color: var(--on-surface-variant); --pico-muted-border-color: var(--outline-variant); --pico-card-background-color: var(--surface); --pico-font-family: var(--md-ref-typeface-plain); --pico-font-size: 15px; } /* ── Base ───────────────────────────────────────────────────────────────── */ html { font-family: var(--md-ref-typeface-plain); font-size: var(--pico-font-size); font-optical-sizing: auto; color-scheme: light; } html.dark { color-scheme: dark; } body { font-family: var(--md-ref-typeface-plain); background: var(--surface-container-low); color: var(--on-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Pico used to provide this layout helper. */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; } /* Material Symbols: weight/fill axes + crisp rendering. Beer renders icons as name; this guarantees the variable-font axes regardless of Beer. */ .material-symbols-outlined, i.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }