/* ============================================================================ * Atlas — design tokens (canonical). Vendor a copy into each project. * 11 working color roles + type / space / radius / shadow. Feedback tints are * DERIVED (color-mix), so change one solid and every tinted state follows. * Brand FILL (--brand #4A9FD9) is constant in light & dark; only brand-as-text * (--brand-strong) lightens in dark. Works with system dark (media query) and * a manual toggle that stamps [data-theme] on :root. * ========================================================================== */ :root{ /* ---- type ---- */ --font-sans:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --step--1:.833rem; --step-0:1rem; --step-1:1.2rem; --step-2:1.44rem; --step-3:1.728rem; --step-4:2.07rem; --step-5:2.49rem; --step-6:3rem; /* ---- space / radius ---- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px; /* ---- color: brand ---- */ --brand:#4A9FD9; --brand-strong:#2668A1; --brand-hover:#3184C4; --brand-contrast:#FFFFFF; --ring:#62ADDF; /* ---- color: accent (violet — the brand's cool sibling; clear of every semantic hue) ---- */ --accent:#7C6BF5; --accent-strong:#5B45D6; /* ---- color: neutral ---- */ --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#ECEFF4; --border:#DAE0E7; --border-strong:#BEC6D0; --text:#131720; --text-muted:#545F6D; --text-subtle:#6D7988; --text-inverse:#FFFFFF; /* ---- color: feedback (one solid each; info reuses the brand) ---- */ --success:#1C6E4D; --warning:#A25410; --danger:#C9262C; --info:var(--brand-strong); /* ---- derived feedback surfaces (defined ONCE; they re-derive per theme because they reference -- and --surface, which change) ---- */ --success-bg:color-mix(in srgb, var(--success) 12%, var(--surface)); --success-border:var(--success); --warning-bg:color-mix(in srgb, var(--warning) 12%, var(--surface)); --warning-border:var(--warning); --danger-bg: color-mix(in srgb, var(--danger) 12%, var(--surface)); --danger-border: var(--danger); --info-bg: color-mix(in srgb, var(--info) 12%, var(--surface)); --info-border: var(--info); --accent-soft:color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-border:var(--accent); /* ---- elevation ---- */ --shadow-sm:0 1px 2px rgba(19,23,32,.06),0 1px 3px rgba(19,23,32,.08); --shadow-md:0 4px 12px rgba(19,23,32,.10); --shadow-lg:0 12px 32px rgba(19,23,32,.14); } /* ---- dark, via the OS setting (no JS needed). :not([data-theme=light]) lets a manual "force light" still win. ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --brand:#4A9FD9; --brand-strong:#83BFE7; --brand-hover:#62ADDF; --brand-contrast:#FFFFFF; --ring:#62ADDF; --accent:#7C6BF5; --accent-strong:#B3A6FF; --bg:#0C0F16; --surface:#141A23; --surface-2:#232934; --border:#2A323E; --border-strong:#3A4453; --text:#ECEFF4; --text-muted:#929DAA; --text-subtle:#6D7988; --text-inverse:#131720; --success:#4CBD8A; --warning:#F5BB47; --danger:#EA5E57; --info:var(--brand-strong); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 16px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6); } } /* ---- dark, forced by a toggle that sets ---- */ :root[data-theme="dark"]{ --brand:#4A9FD9; --brand-strong:#83BFE7; --brand-hover:#62ADDF; --brand-contrast:#FFFFFF; --ring:#62ADDF; --accent:#7C6BF5; --accent-strong:#B3A6FF; --bg:#0C0F16; --surface:#141A23; --surface-2:#232934; --border:#2A323E; --border-strong:#3A4453; --text:#ECEFF4; --text-muted:#929DAA; --text-subtle:#6D7988; --text-inverse:#131720; --success:#4CBD8A; --warning:#F5BB47; --danger:#EA5E57; --info:var(--brand-strong); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 16px rgba(0,0,0,.5); --shadow-lg:0 16px 40px rgba(0,0,0,.6); } /* [data-theme="light"] simply keeps the :root defaults, so no block is needed. */