/* ========================================================================== Anchor Ops - brand color system Day mode is the default. Night mode via . With no explicit data-theme, the OS preference (prefers-color-scheme) decides. One amber knob; neutrals, status, and surfaces derive from the tokens below. ========================================================================== */ :root { /* ---- Brand (mode-independent) ---- */ --ao-amber: #EA5D15; /* primary / CTA / accent */ --ao-amber-hover: #C94A0A; --ao-amber-tint: #FBE7D5; /* ---- Neutrals (mode-independent palette) ---- */ --ao-ink: #0E0E0F; --ao-charcoal: #1C1D20; --ao-slate: #6B6E76; --ao-mist: #E4E2DD; --ao-bone: #F7F5F1; --ao-white: #FFFFFF; /* ---- Status (mode-independent) ---- */ --ao-success: #1D9E75; --ao-warning: #EF9F27; --ao-danger: #E24B4A; --ao-info: #378ADD; /* expose as plain status names too */ --success: var(--ao-success); --warning: var(--ao-warning); --danger: var(--ao-danger); --info: var(--ao-info); --purple: #8B5CF6; /* accent is the same in both modes */ --accent: var(--ao-amber); --accent-hover: var(--ao-amber-hover); --accent-tint: var(--ao-amber-tint); --on-accent: #FFFFFF; } /* ---- DAY (default) ------------------------------------------------------- */ :root, :root[data-theme="day"] { color-scheme: light; --bg: #FFFFFF; --surface: #F7F5F1; /* bone */ --panel: #F7F5F1; /* headers / sidebar / table head */ --card: #FFFFFF; --hover: #F1EFEA; --active: var(--ao-amber-tint); --chip: #EFEDE8; --chip-fg: #4A4D54; --line: #E4E2DD; /* mist */ --line2: #D8D5CF; --fg: #0E0E0F; /* ink */ --mut: #6B6E76; /* slate */ --mut2: #8A8D94; --input-bg: #FFFFFF; --accent-tint-bg: var(--ao-amber-tint); } /* ---- NIGHT --------------------------------------------------------------- */ :root[data-theme="night"] { color-scheme: dark; --bg: #0E0E0F; /* ink */ --surface: #1C1D20; /* charcoal */ --panel: #161719; --card: #1C1D20; --hover: #26282C; --active: #2F2A26; --chip: #26282C; --chip-fg: #B8BBC2; --line: #2A2B2E; --line2: #3A3B3F; --fg: #FFFFFF; --mut: #9A9DA4; /* secondary text (night) */ --mut2: #7E828A; --input-bg: #161719; --accent-tint-bg: #3A2417; } /* ---- OS dark fallback: only when the user has NOT chosen explicitly ------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0E0E0F; --surface: #1C1D20; --panel: #161719; --card: #1C1D20; --hover: #26282C; --active: #2F2A26; --chip: #26282C; --chip-fg: #B8BBC2; --line: #2A2B2E; --line2: #3A3B3F; --fg: #FFFFFF; --mut: #9A9DA4; --mut2: #7E828A; --input-bg: #161719; --accent-tint-bg: #3A2417; } } /* ---- Pills / status chips: legible in both modes via color-mix ----------- */ .pill.green { background: color-mix(in srgb, var(--success) 14%, transparent); color: color-mix(in srgb, var(--success) 72%, var(--fg)); border-color: color-mix(in srgb, var(--success) 34%, transparent); } .pill.blue { background: color-mix(in srgb, var(--info) 14%, transparent); color: color-mix(in srgb, var(--info) 72%, var(--fg)); border-color: color-mix(in srgb, var(--info) 34%, transparent); } .pill.red { background: color-mix(in srgb, var(--danger) 14%, transparent); color: color-mix(in srgb, var(--danger) 72%, var(--fg)); border-color: color-mix(in srgb, var(--danger) 34%, transparent); } .pill.amber { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 72%, var(--fg)); border-color: color-mix(in srgb, var(--warning) 36%, transparent); } .pill.purple { background: color-mix(in srgb, var(--purple) 14%, transparent); color: color-mix(in srgb, var(--purple) 72%, var(--fg)); border-color: color-mix(in srgb, var(--purple) 34%, transparent); } .pill.gray { background: var(--chip); color: var(--chip-fg); border-color: var(--line2); } /* ---- Brand logo: show the right one for the mode (pure CSS) --------------- */ .ao-logo { height: 26px; width: auto; display: block; } .ao-logo-night { display: none; } :root[data-theme="night"] .ao-logo-day { display: none; } :root[data-theme="night"] .ao-logo-night { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ao-logo-day { display: none; } :root:not([data-theme]) .ao-logo-night { display: block; } } /* ---- Theme toggle button (shared) ---------------------------------------- */ .ao-theme-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--chip); color: var(--fg); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; line-height: 1; } .ao-theme-toggle:hover { border-color: var(--accent); }