/* SupaChat "Night Market" theme — shared by the marketplace and the Merchant Hub. Night + Day token sets and square, hairline versions of the tokens.css primitives. Load after tokens.css. Theme switch: [data-theme="night"|"day"] on . */ /* ================= theme tokens ================= */ :root, [data-theme="night"] { color-scheme: dark; --bg: #0B0A0C; --surface: #131116; --surface-2: #1B181F; --ink: #EDE8E1; --ink-2: #C9C2B8; --ink-3: #A39B90; --line: rgba(237, 232, 225, 0.14); --line-2: rgba(237, 232, 225, 0.28); --accent: #F07DBA; --on-accent: #0B0A0C; --accent-ink: #F07DBA; /* accent used as text */ --scrim: rgba(11, 10, 12, 0.92); --good: #7FD1A5; --warn: #E8C547; --bad: #FF8A8A; --img-bg: #1B181F; } [data-theme="day"] { color-scheme: light; --bg: #F2EEE7; --surface: #FBF9F5; --surface-2: #EAE5DC; --ink: #0B0A0C; --ink-2: #3A3631; --ink-3: #6A635A; --line: rgba(11, 10, 12, 0.13); --line-2: rgba(11, 10, 12, 0.3); --accent: #B0226A; --on-accent: #FFFFFF; --accent-ink: #A11C60; --scrim: rgba(11, 10, 12, 0.88); --good: #0E7A4E; --warn: #8A5A00; --bad: #B42330; --img-bg: #E4DED4; } :root { /* map the shared tokens onto the theme so older rules keep working */ --brand: var(--accent); --brand-600: var(--accent); --brand-50: var(--surface-2); --brand-100: var(--surface-2); --magenta: var(--accent); --magenta-600: var(--accent-ink); --magenta-50: var(--surface-2); --grad: var(--accent); --green: var(--good); --green-50: transparent; --amber: var(--warn); --amber-50: transparent; --red: var(--bad); --red-50: transparent; --r-sm: 0; --r: 0; --r-lg: 0; --shadow-1: none; --shadow-2: none; --shadow-3: 0 30px 80px rgba(0, 0, 0, 0.45); --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --mono: 'Martian Mono', ui-monospace, Menlo, monospace; --font: 'Manrope', -apple-system, 'Segoe UI', sans-serif; --header-h: 118px; } html, body { background: var(--bg); color: var(--ink); } body { font-family: var(--font); transition: background .25s, color .25s; } ::selection { background: var(--accent); color: var(--on-accent); } :focus-visible { border-radius: 0; } .mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; } .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .kicker.hot { color: var(--accent-ink); } .muted { color: var(--ink-3); } /* ================= primitives (override tokens.css) ================= */ .btn { border-radius: 0; height: 50px; padding: 0 22px; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .btn:active { transform: none; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--ink-2); } .btn-hot { background: var(--accent); color: var(--on-accent); box-shadow: none; } .btn-hot:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-soft { background: var(--surface-2); color: var(--ink); } .btn-soft:hover { background: var(--line); } .btn-sm { height: 38px; padding: 0 14px; font-size: 11px; } .btn-lg { height: 58px; padding: 0 28px; font-size: 13px; } .icon-btn { border-radius: 0; color: var(--ink); } .icon-btn:hover { background: var(--surface-2); } .chip { border-radius: 0; height: 36px; padding: 0 14px; background: transparent; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } button.chip:hover, a.chip:hover { border-color: var(--ink); } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .badge { border-radius: 0; height: 22px; padding: 0 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } .badge-off { background: var(--accent); color: var(--on-accent); } .badge-excl { background: var(--ink); color: var(--bg); } .badge-spon { background: rgba(11, 10, 12, 0.72); color: #EDE8E1; border: 1px solid rgba(237,232,225,.3); } .badge-soft { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); } .badge-green { color: var(--good); border: 1px solid currentColor; } .badge-amber { color: var(--warn); border: 1px solid currentColor; } .badge-red { color: var(--bad); border: 1px solid currentColor; } .retailer { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .retailer .dot { width: 7px; height: 7px; border-radius: 0; } .input, .select { border-radius: 0; background: transparent; border: 1px solid var(--line-2); color: var(--ink); } .select { background-color: var(--surface); } .select option { background: var(--surface); color: var(--ink); } .switch { width: 40px; height: 22px; } .switch span { border-radius: 0; background: var(--line-2); } .switch span::after { border-radius: 0; width: 16px; height: 16px; background: var(--bg); box-shadow: none; } .switch input:checked + span { background: var(--accent); } .skeleton { border-radius: 0; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%); background-size: 200% 100%; } .toast { border-radius: 0; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } .toast a { color: var(--accent-ink); } [data-theme="night"] .toast a { color: #B0226A; } /* ================= day / night switch ================= */ .theme-toggle { display: inline-flex; border: 1px solid var(--line-2); } .theme-toggle button { border: 0; background: transparent; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; } .theme-toggle button svg { width: 13px; height: 13px; } .theme-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }