/* ============================================================================ TONED THEME OVERLAY — nudges the interface from the bright neon-cyan look toward the muted "Stargazer" reference: soft lavender accent, neutral hairline borders, no cyan halo, slightly lower contrast. Deliberately ADDITIVE + SAFE: this file is loaded LAST (after app.css), so it wins by cascade with plain-class selectors — no existing CSS or component is edited, and reverting is a one-line change (remove the in App.razor). FIRST PASS scope: (1) the global design TOKENS — this re-tones everything that reads var(--accent/--border/--glow/…), including per-page scoped styles that use the tokens; (2) the SHARED sg-* / ui- design-system pieces that hard-code the old blue. Deep per-page hard-coded accents are intentionally left for a follow-up. ============================================================================ */ :root { /* ── Aligned to the v6 reference design tokens (Stargazer_AlphaSearch_OGBoard_v6.html) ── --bg #06060C · --tx #F0F1F7 · --mu #8A8EA6 · --fa #50546A · --acc #A78BFA · --blue #4D7CFF · --line rgba(240,241,247,.09). The overlay loads last, so these win by cascade. */ /* Ground (reference #06060C — was base #05070b). */ --bg: #06060C; /* Accent: soft lavender; secondary accent is the reference blue. */ --accent: #a78bfa; --accent-2: #4d7cff; --sg-accent: #a78bfa; --blue: #4d7cff; /* reference --blue */ --faint: #50546a; /* reference --fa (faint labels / captions) */ /* Borders: single neutral hairline, reference --line rgba(240,241,247,.09). Flat, quiet — no card glow. */ --border: rgba(240, 241, 247, 0.09); --border-soft: rgba(240, 241, 247, 0.07); --card-border: rgba(240, 241, 247, 0.10); --sg-border: rgba(240, 241, 247, 0.09); --sg-border-2: rgba(240, 241, 247, 0.12); /* No card edges anywhere (manager: the outlines "cheapen" the whole UI). Cards read via a faint background lift + spacing, not a border/ring — the reference look. Hairline --border stays for dividers/inputs only. */ --glow: none; --card-border: transparent; --card-bg: rgba(20, 22, 32, 0.55); /* Text: reference values. */ --text: #f0f1f7; --muted: #8a8ea6; --sg-text: #f0f1f7; --sg-muted: #8a8ea6; /* Typography: one font — Inter (reference). Linked in App.razor . */ --font-sans: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; } /* All figures line up as tabular numbers (reference invariant). */ body { font-feature-settings: 'tnum' 1; } /* Body wash: swap the cyan radial for a soft lavender one (the purple layer stays). Exact replica, hue only. */ body { background: radial-gradient(900px 600px at 70% 40%, rgba(167, 139, 250, 0.07), transparent 55%), radial-gradient(800px 600px at 30% 60%, rgba(124, 58, 237, 0.05), transparent 60%), var(--bg); } /* Shared design system (sg.css) — retone the hard-coded blue primary + focus ring to lavender. */ .sg-btn-primary { border-color: rgba(167, 139, 250, 0.40); background: rgba(167, 139, 250, 0.12); } .sg-btn-primary:hover { border-color: rgba(167, 139, 250, 0.60); background: rgba(167, 139, 250, 0.17); } .sg-input:focus { border-color: rgba(167, 139, 250, 0.50); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15); } /* Base chrome (base.css) — accent button + input focus: cyan → lavender, softer halo. */ .ui-btn-accent { border-color: rgba(167, 139, 250, 0.45); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.16); } .ui-btn-accent:hover { border-color: rgba(167, 139, 250, 0.65); } .ui-input:focus { border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.20); } /* ── Flatten card EDGES across the whole interface (manager: the outlines cheapen the UI) ── Remove the rounded-rect border + ring from card surfaces; keep the faint background lift so a card still reads as a panel. Inputs/dividers keep their hairline (they use --border, untouched). */ .sg-card, .ui-card, .sg-panel, .flt.sg-card { border-color: transparent !important; box-shadow: none !important; }