/* * Fusion theme palette * * One layer of indirection between concrete colors and the rules that consume them, so the * same component CSS works in light, dark, and (future) high-contrast modes without * branching. The active theme is controlled by `data-theme` on the element; the * default (no attribute, or `data-theme="light"`) is the light palette. * * Naming convention: * --bg-* backgrounds (page, surface = cards, sunken = inputs) * --fg-* foregrounds (strong = headings, body = paragraph, muted = secondary, faint = captions) * --border-* borders (default = standard, strong = focused/hovered, faint = subtle dividers) * --accent-* brand color (primary = links/CTAs, accent2 = hover/active state) * --danger-* error states * --shadow-* semantic shadow stops */ :root, :root[data-theme="light"] { color-scheme: light; --bg-page: #f7f8fa; --bg-surface: #ffffff; --bg-sunken: #f1f3f6; --fg-strong: #0b1e30; --fg-body: #1c2c3d; --fg-muted: #4a5b6e; --fg-faint: #7d8a9a; --border-default: rgba(11, 30, 48, 0.12); --border-strong: rgba(11, 30, 48, 0.25); --border-faint: rgba(11, 30, 48, 0.06); --accent-primary: #1b3a57; --accent-primary-strong: #234971; --accent-link: #1b6aa5; --accent-link-hover: #134c7a; --danger-bg: #fdecee; --danger-border: rgba(220, 53, 69, 0.4); --danger-fg: #a31b2a; --info-bg: #eaf3fb; --info-border: rgba(27, 106, 165, 0.35); --info-fg: #134c7a; --success-bg: #e7f5ea; --success-border: rgba(40, 130, 65, 0.35); --success-fg: #1f6132; --shadow-card: 0 4px 16px rgba(11, 30, 48, 0.06); --shadow-card-subtle: 0 1px 4px rgba(11, 30, 48, 0.08); --shadow-card-strong: 0 8px 32px rgba(11, 30, 48, 0.12); --shadow-focus: 0 0 0 0.25rem rgba(27, 106, 165, 0.18); --header-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 250, 0.96)); --header-border: rgba(11, 30, 48, 0.08); } :root[data-theme="dark"] { color-scheme: dark; --bg-page: #0b0f14; --bg-surface: #1a222e; --bg-sunken: #0f141b; --fg-strong: #f5f7fa; --fg-body: #e8edf2; --fg-muted: rgba(232, 237, 242, 0.7); --fg-faint: rgba(232, 237, 242, 0.45); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.22); --border-faint: rgba(255, 255, 255, 0.05); --accent-primary: #2d6c8f; --accent-primary-strong: #348aae; --accent-link: #6aafda; --accent-link-hover: #8fc5e8; --danger-bg: rgba(220, 53, 69, 0.12); --danger-border: rgba(220, 53, 69, 0.4); --danger-fg: #ff8a95; --info-bg: rgba(106, 175, 218, 0.12); --info-border: rgba(106, 175, 218, 0.35); --info-fg: #8fc5e8; --success-bg: rgba(76, 175, 80, 0.12); --success-border: rgba(76, 175, 80, 0.35); --success-fg: #7ed28f; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.2); --shadow-card-subtle: 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-card-strong: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 0.25rem rgba(45, 108, 143, 0.25); --header-bg: linear-gradient(90deg, rgba(27, 58, 87, 0.95), rgba(11, 15, 20, 0.95)); --header-border: rgba(255, 255, 255, 0.08); } /* If no theme is set yet but the OS prefers dark, switch to dark. ThemeService overrides this with an explicit data-theme attribute after first render. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg-page: #0b0f14; --bg-surface: #1a222e; --bg-sunken: #0f141b; --fg-strong: #f5f7fa; --fg-body: #e8edf2; --fg-muted: rgba(232, 237, 242, 0.7); --fg-faint: rgba(232, 237, 242, 0.45); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.22); --border-faint: rgba(255, 255, 255, 0.05); --accent-primary: #2d6c8f; --accent-primary-strong: #348aae; --accent-link: #6aafda; --accent-link-hover: #8fc5e8; --danger-bg: rgba(220, 53, 69, 0.12); --danger-border: rgba(220, 53, 69, 0.4); --danger-fg: #ff8a95; --info-bg: rgba(106, 175, 218, 0.12); --info-border: rgba(106, 175, 218, 0.35); --info-fg: #8fc5e8; --success-bg: rgba(76, 175, 80, 0.12); --success-border: rgba(76, 175, 80, 0.35); --success-fg: #7ed28f; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.2); --shadow-card-subtle: 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-card-strong: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-focus: 0 0 0 0.25rem rgba(45, 108, 143, 0.25); --header-bg: linear-gradient(90deg, rgba(27, 58, 87, 0.95), rgba(11, 15, 20, 0.95)); --header-border: rgba(255, 255, 255, 0.08); } } /* Smooth the transition when the user flips the toggle. */ html, body, .fusion-shell, .fusion-header, .fusion-footer, .fusion-result, .fusion-citation, .fusion-login-card, .fusion-model-pick, .fusion-search-bar input, .fusion-login-input input { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }