/* ========================================================================== Main Channel, Design Tokens v1 https://www.mainchannel.app/brand/v1/mc-tokens.css The single source of truth for the brand. Every Main Channel property, marketing site, owner portal, dashboards, admin tools, reads its colour, type, spacing and elevation from here and nowhere else. All names are prefixed --mc-* so this file can be dropped into an existing application without colliding with variables already defined there. THEMES :root → dark (default; the brand's native state) [data-theme="light"] → light (recommended for data-dense admin tools) [data-theme="dark"] → explicit dark, wins over a light ancestor Set the theme on : Nothing switches automatically, prefers-color-scheme is deliberately NOT wired up, so an app's appearance never changes out from under an operator mid-task. ========================================================================== */ :root{ /* ---- Depth ramp: page → raised surface → hover ------------------------ */ --mc-bg:#05121A; --mc-surface:#081B25; --mc-surface-2:#0B2430; --mc-surface-3:#10303E; --mc-surface-4:#17404F; /* ---- Hairlines ------------------------------------------------------- */ --mc-line:rgba(150,196,218,.13); --mc-line-strong:rgba(150,196,218,.26); /* ---- Text ------------------------------------------------------------ */ --mc-text:#E8F2F7; --mc-text-dim:#93AFBE; --mc-text-faint:#65808F; --mc-text-on-accent:#FFFFFF; /* ---- Channel blue, sampled from the Smith Lake mark ----------------- */ --mc-blue:#2E7FB5; --mc-blue-hover:#3690CB; --mc-blue-bright:#63B6E6; --mc-blue-deep:#1F4E79; --mc-blue-wash:rgba(99,182,230,.10); /* Deep end of the channel, for full-bleed gradients. */ --mc-bg-deep:#0B3B52; /* ---- Channel-marker lights (also the semantic status set) ------------ */ --mc-green:#42B98A; /* underway · success · live */ --mc-amber:#E9A23B; /* in the slip · warning · pending */ --mc-red:#D9534F; /* port marker · danger · error */ --mc-slate:#5E7C8C; /* on the trailer · neutral · idle */ --mc-green-wash:rgba(66,185,138,.12); --mc-amber-wash:rgba(233,162,59,.12); --mc-red-wash:rgba(217,83,79,.12); --mc-slate-wash:rgba(94,124,140,.12); /* ---- Focus ----------------------------------------------------------- */ --mc-focus:#63B6E6; --mc-focus-ring:0 0 0 3px rgba(99,182,230,.38); /* ---- Elevation ------------------------------------------------------- */ --mc-shadow-sm:0 1px 2px rgba(0,0,0,.36); --mc-shadow:0 6px 20px -8px rgba(0,0,0,.55); --mc-shadow-lg:0 18px 48px -16px rgba(0,0,0,.7); /* ---- Radius ---------------------------------------------------------- */ --mc-radius-sm:7px; --mc-radius:11px; --mc-radius-md:14px; --mc-radius-lg:22px; --mc-radius-pill:999px; /* ---- Spacing scale (4px base) ---------------------------------------- */ --mc-space-1:4px; --mc-space-2:8px; --mc-space-3:12px; --mc-space-4:16px; --mc-space-5:24px; --mc-space-6:32px; --mc-space-7:48px; --mc-space-8:64px; /* ---- Type ------------------------------------------------------------ */ --mc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mc-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --mc-text-xs:.75rem; --mc-text-sm:.86rem; --mc-text-base:.95rem; --mc-text-lg:1.08rem; --mc-text-xl:1.32rem; --mc-text-2xl:1.75rem; --mc-text-3xl:2.4rem; --mc-leading:1.6; --mc-leading-tight:1.2; /* ---- Layout ---------------------------------------------------------- */ --mc-maxw:1180px; --mc-maxw-app:1440px; --mc-sidebar-w:248px; --mc-topbar-h:60px; /* ---- Motion ---------------------------------------------------------- */ --mc-ease:cubic-bezier(.4,0,.2,1); --mc-fast:.15s; --mc-normal:.25s; color-scheme:dark; } /* ========================================================================== Light theme, for data-dense admin surfaces where operators live all day. Same hues, inverted depth ramp. Blue darkens so it stays AA on white. ========================================================================== */ [data-theme="light"]{ --mc-bg:#F4F8FA; --mc-surface:#FFFFFF; --mc-surface-2:#FFFFFF; --mc-surface-3:#EEF4F8; --mc-surface-4:#E3ECF2; --mc-line:rgba(23,64,79,.14); --mc-line-strong:rgba(23,64,79,.28); --mc-text:#0B2430; --mc-text-dim:#4A6675; --mc-text-faint:#7690A0; --mc-text-on-accent:#FFFFFF; --mc-blue:#1F6FA5; --mc-blue-hover:#175C8A; --mc-blue-bright:#1F6FA5; --mc-blue-deep:#123C5C; --mc-blue-wash:rgba(31,111,165,.09); --mc-bg-deep:#123C5C; --mc-green:#1E7F5C; --mc-amber:#A66A0B; --mc-red:#B23B37; --mc-slate:#5E7C8C; --mc-green-wash:rgba(30,127,92,.11); --mc-amber-wash:rgba(166,106,11,.13); --mc-red-wash:rgba(178,59,55,.10); --mc-slate-wash:rgba(94,124,140,.11); --mc-focus:#1F6FA5; --mc-focus-ring:0 0 0 3px rgba(31,111,165,.30); --mc-shadow-sm:0 1px 2px rgba(11,36,48,.09); --mc-shadow:0 6px 20px -8px rgba(11,36,48,.20); --mc-shadow-lg:0 18px 48px -16px rgba(11,36,48,.26); color-scheme:light; } /* Explicit dark wins over an inherited light ancestor. */ [data-theme="dark"]{ --mc-bg:#05121A; --mc-surface:#081B25; --mc-surface-2:#0B2430; --mc-surface-3:#10303E; --mc-surface-4:#17404F; --mc-line:rgba(150,196,218,.13); --mc-line-strong:rgba(150,196,218,.26); --mc-text:#E8F2F7; --mc-text-dim:#93AFBE; --mc-text-faint:#65808F; --mc-blue:#2E7FB5; --mc-blue-hover:#3690CB; --mc-blue-bright:#63B6E6; --mc-blue-deep:#1F4E79; --mc-blue-wash:rgba(99,182,230,.10); /* Deep end of the channel, for full-bleed gradients. */ --mc-bg-deep:#0B3B52; --mc-green:#42B98A; --mc-amber:#E9A23B; --mc-red:#D9534F; --mc-focus:#63B6E6; --mc-focus-ring:0 0 0 3px rgba(99,182,230,.38); color-scheme:dark; }