/* =========================================================================== siriusly.ai - LIGHT THEME token sheet Companion to tokens/colors.css. Imported right after it in design-system.css so every semantic alias (--color-primary, --text-body, --surface-page, ...) flips for light mode with no changes needed anywhere the alias is already used - only the places that hard-code a dark value instead of reading a token need an explicit fix below. Everything here is scoped to :root[data-theme="light"], so the dark theme is byte-for-byte unchanged when the attribute is absent. base.html always renders an explicit data-theme (light for a new visitor, dark once the 'sr_theme' cookie is set - see billing.context_processors.theme and the toggle script in _navbar.html), so in practice the attribute is never actually absent on a served page. The ramps themselves are not redefined - --orange-*, --gold-*, --coal-* stay as they are. Signal Orange steps down the ramp on paper: orange-600 for fills, orange-700 for text, because orange-500 (#D07E45) is only 2.4:1 on #F6F4EF and fails contrast as type. =========================================================================== */ :root[data-theme="light"] { /* ---- Brand ---- */ --color-primary: var(--orange-600); --color-primary-hover: var(--orange-700); --color-primary-active: var(--orange-800); --color-primary-soft: var(--orange-100); --color-primary-text: var(--orange-700); --color-accent: var(--gold-600); --color-accent-hover: var(--gold-700); --color-accent-soft: var(--gold-100); /* ---- Text ---- */ --text-strong: var(--coal-950); --text-body: var(--coal-700); --text-muted: var(--coal-500); --text-subtle: var(--coal-400); --text-on-brand: var(--white); --text-link: var(--orange-700); /* ---- Surfaces ---- Dark lifts the page one stop off the bottom of the ramp; light mirrors it, sitting one stop below the top. Cards are pure white so they lift off the paper without a heavy shadow. */ --surface-page: #EDE9E0; --surface-card: var(--white); --surface-sunken: var(--coal-100); --surface-inverse: var(--coal-900); --surface-hover: var(--coal-100); /* ---- Lines ---- */ --border-subtle: #E7E3DA; --border-default: var(--coal-200); --border-strong: var(--coal-300); --border-focus: var(--orange-600); /* ---- Status ---- */ --status-success: #2C7A46; --status-success-soft: #E2F1E7; --status-warning: var(--gold-700); --status-warning-soft: var(--gold-100); --status-danger: #C0392B; --status-danger-soft: #FBE6E2; /* ---- Gradients ---- Same direction, but the light CTA panel carries dark type, so the ramp runs a touch brighter to keep --coal-950 legible on top of it. */ --gradient-signature: linear-gradient(120deg, var(--orange-500) 0%, var(--gold-300) 100%); --gradient-night: linear-gradient(180deg, var(--coal-50) 0%, var(--coal-100) 100%); } /* --------------------------------------------------------------------------- Elevation. The dark theme's near-black shadows turn to mud on paper, so the light set is warm-grey, shorter and softer, and leans on the border for a card's edge rather than on the shadow. --------------------------------------------------------------------------- */ :root[data-theme="light"] { --shadow-xs: 0 1px 2px rgba(26, 24, 22, 0.05); --shadow-sm: 0 1px 2px rgba(26, 24, 22, 0.06), 0 1px 1px rgba(26, 24, 22, 0.04); --shadow-md: 0 4px 12px rgba(26, 24, 22, 0.07), 0 1px 3px rgba(26, 24, 22, 0.05); --shadow-lg: 0 12px 28px rgba(26, 24, 22, 0.09), 0 3px 8px rgba(26, 24, 22, 0.05); --shadow-xl: 0 24px 56px rgba(26, 24, 22, 0.12), 0 6px 16px rgba(26, 24, 22, 0.06); --shadow-brand: 0 6px 18px rgba(180, 101, 47, 0.26); --shadow-accent: 0 6px 18px rgba(206, 138, 18, 0.22); --ring-focus: 0 0 0 3px rgba(180, 101, 47, 0.28); --ring-danger: 0 0 0 3px rgba(192, 57, 43, 0.26); } /* --------------------------------------------------------------------------- Backdrop. tokens/base.css's "Ember corner" (bloom + Iris star bleeding out of a corner) is intentionally NOT overridden here - the star stays in light mode exactly as it renders in dark, unscoped, so this is a deliberate absence rather than a gap in the checklist below. landing.html suppresses body::after itself (body.lp-body::after { content: none }) and keeps its own .lp-bg-star - unchanged in both themes. --------------------------------------------------------------------------- */ :root[data-theme="light"] ::selection { background: var(--orange-200); color: var(--coal-950); } /* :not(.lp-btn) - same gotcha the comment block below explains: this selector outranks a component's own ".lp-btn.primary:hover" color rule, so without the guard every -based pill button loses its intended hover text color to this one (e.g. near-invisible orange-on-orange). */ :root[data-theme="light"] a:hover:not(.lp-btn) { color: var(--orange-800); } /* --------------------------------------------------------------------------- Per-selector fixes. These are the places the dark CSS hard-codes a value instead of reading a token - each needs a light counterpart. Gotcha: ":root[data-theme=\"light\"]" is itself worth TWO specificity points (:root is a pseudo-class, same tier as the attribute selector next to it), not one. So ":root[data-theme=\"light\"] .foo" outranks a dark compound state rule like ".foo.on" or ".foo:hover" even though ".foo.on" looks more specific at a glance - it isn't, .foo + :root[..] both count as 2 class-level selectors vs .foo.on's 2. Any override below that shares a property with a state variant of the same element carries an explicit :not() so the state rule (still living in the original dark stylesheet) keeps winning in light mode too. --------------------------------------------------------------------------- */ /* navbar.css - the pill is a hard-coded coal-800 at 72% */ :root[data-theme="light"] .sr-nav { background: rgba(255, 255, 255, 0.76); border-color: var(--border-default); box-shadow: 0 8px 24px rgba(26, 24, 22, 0.08); } :root[data-theme="light"] .sr-signup:not(:hover) .arw { background: rgba(255, 255, 255, 0.24); } :root[data-theme="light"] .sr-signup .arw svg { color: var(--white); } :root[data-theme="light"] .sr-av { color: var(--white); } /* settings.css - .st-sheet paints --coal-800 directly; the choice tiles tint with rgba(255,247,237,.02), a warm white wash that vanishes on paper. */ :root[data-theme="light"] .st-sheet { background: var(--surface-card); } :root[data-theme="light"] .st-choice:not(.on), :root[data-theme="light"] .st-design-card:not(.on) { background: var(--surface-card); } :root[data-theme="light"] .st-choice:hover:not(.on), :root[data-theme="light"] .st-design-card:hover:not(.on), :root[data-theme="light"] .st-pill:hover:not(.on) { background: var(--surface-hover); border-color: var(--border-strong); } :root[data-theme="light"] .st-icon { background: var(--color-primary-soft); color: var(--color-primary-text); } :root[data-theme="light"] .st-badge { color: var(--white); } :root[data-theme="light"] .st-credits, :root[data-theme="light"] .st-level-value { color: var(--color-primary-text); } :root[data-theme="light"] .st-switch:not([aria-checked="true"]) { background: var(--coal-300); } :root[data-theme="light"] .st-btn.primary { color: var(--white); } :root[data-theme="light"] .st-savebar { background: rgba(255, 255, 255, 0.9); } :root[data-theme="light"] .st-design-swatch { background: var(--surface-sunken); } /* main.css - a video frame stays black in both themes, only its chrome flips; these fix the accents that were hard-coded to dark-mode values. */ :root[data-theme="light"] .progress-halo { border-color: rgba(180, 101, 47, 0.35); } :root[data-theme="light"] .btn-generate:hover:not(:disabled), :root[data-theme="light"] .btn-download:hover { box-shadow: 0 8px 24px rgba(180, 101, 47, 0.3); } :root[data-theme="light"] .language-select:focus { box-shadow: var(--ring-focus); } /* studio.css - the wizard steps bar is a hard-coded dark "console" panel in both themes by default; give it a light counterpart in the same card language as the rest of the page. The default-dot/default-label overrides exclude .active/.done so the still-correct color-primary/text-strong styling those states already read from tokens keeps winning. */ :root[data-theme="light"] .wiz-progress { background: var(--surface-card); border-color: var(--border-default); } :root[data-theme="light"] .wiz-progress-count { color: var(--text-muted); } :root[data-theme="light"] .wiz-progress-pct { color: var(--color-primary-text); } :root[data-theme="light"] .wiz-progress-hint { color: var(--text-muted); } :root[data-theme="light"] .wiz-rail-track { background: var(--border-default); } :root[data-theme="light"] .wiz-step-dot:not(.active):not(.done) .dot { border-color: var(--border-default); background: var(--surface-sunken); color: var(--text-muted); } :root[data-theme="light"] .wiz-step-dot:not(.active):not(.done) .dot-label { color: var(--text-muted); } :root[data-theme="light"] .wiz-step-dot.done .dot-label { color: var(--text-body); } :root[data-theme="light"] .wiz-step-dot.done.clickable:hover .dot-label { color: var(--color-primary-text); } /* .type-card (product-type step) hard-codes coal-600/500 now instead of reading --surface-card/--surface-hover, to lift it off the near-black dark canvas - restore the plain white-card tokens here, where they were already correct. */ :root[data-theme="light"] .type-card { background: var(--surface-card); } :root[data-theme="light"] .type-card .glyph { background: var(--surface-hover); } /* the reel-layout diagram mocks a phone/video frame; hard-coded near-black in both themes reads too harsh floating in a white card on paper, so it steps up the coal ramp instead of black - two steps lighter than the first pass at this, which still read too dark next to the card's white background. */ :root[data-theme="light"] .lay-frame { background: var(--coal-200); } :root[data-theme="light"] .lay-frame-inner { background: linear-gradient(180deg, var(--coal-100), var(--coal-300)); } :root[data-theme="light"] .lay-panel { background: var(--coal-600); } /* STATIC/DYNAMIC corner pill: dark mode uses a soft-primary fill, but that pairing is a pale peach on white in light mode - keep this one the plain white shape it already was there. */ :root[data-theme="light"] .lay-pill { background: var(--white); color: var(--color-primary); box-shadow: var(--shadow-sm); } /* the voice-preview