/* tokens.css — color themes via CSS custom properties (mirrors the example project). Selected by setting data-theme on . Light is the default. */ :root, :root[data-theme="light"] { --bg: #f5f6f8; --fg: #1a1a1a; --panel: #ffffff; --soft: #fafafa; --border: #e5e7eb; --muted: #6b7280; --link: #2563eb; --primary: #2563eb; --primary-fg: #ffffff; --topbar: #1f2937; --topbar-fg: #ffffff; --user: #dbeafe; --assistant: #ecfccb; --error-bg: #fee2e2; --error-fg: #991b1b; } :root[data-theme="dark"] { --bg: #15171c; --fg: #e8eaed; --panel: #1f232b; --soft: #262b34; --border: #333a45; --muted: #9aa4b2; --link: #7cb3ff; --primary: #3b82f6; --primary-fg: #ffffff; --topbar: #0b0e13; --topbar-fg: #e8eaed; --user: #1e3a5f; --assistant: #2c3b1b; --error-bg: #3a1414; --error-fg: #fca5a5; } :root[data-theme="lmu"] { --bg: #f5f5f5; --fg: #232323; --panel: #ffffff; --soft: #f5f5f5; --border: #C0C1C3; --muted: #626468; --link: #006B2F; --primary: #00883A; --primary-fg: #ffffff; --topbar: #00883A; --topbar-fg: #ffffff; --user: #d9f0e0; --assistant: #eef6f0; --error-bg: #ffeae9; --error-fg: #c00018; } :root[data-theme="pop"] { --bg: #fffef0; --fg: #1a1a1a; --panel: #ffffff; --soft: #f0e8ff; --border: #1a1a1a; --muted: #555555; --link: #5B2C8C; --primary: #5B2C8C; --primary-fg: #ffffff; --topbar: #5B2C8C; --topbar-fg: #ffffff; --user: #f0e8ff; --assistant: #e0f7ff; --error-bg: #ffeae9; --error-fg: #c00018; } /* Shared topbar chrome: pill flag language toggle + theme swatches (used on every page) */ .chrome { display: flex; align-items: center; gap: .6rem; } .chrome .flags, .chrome .themes { display: flex; gap: .25rem; } .chrome .flag { display: flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border: 1px solid transparent; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--topbar-fg); cursor: pointer; font-size: 1rem; line-height: 1; } .chrome .flag span { font-size: .68rem; font-weight: 600; opacity: .85; } .chrome .flagicon { height: .82rem; width: auto; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); } /* platform logo used in brand spots (topbars, login) — replaces the 🤖 emoji */ .brand-logo { height: 1.5em; width: auto; vertical-align: -.32em; border-radius: 5px; } .chrome .flag[aria-pressed="true"] { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.6); } .chrome .swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); cursor: pointer; padding: 0; } .chrome .swatch[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 1px; } .chrome .sw-light { background: #fff; } .chrome .sw-dark { background: #15171c; } .chrome .sw-lmu { background: #00883A; } .chrome .sw-pop { background: #5B2C8C; }