/* ══════════════════════════════════════════════════════════════════════════ sf-final-admin.css — Core Chain Labs · the operator console, on brand. WHY THIS FILE EXISTS. admin.html links exactly two stylesheets — the font faces and the minified Tailwind build (`/admin.css`). It links NO theme.css, NO sf-base.css and NO sf-refresh.css, so not one of the client's --cc-* values, none of its solved chrome and neither half of its type pair has ever reached the panel. It rendered in the engine's stock shadcn-neutral skin: #fafafa / #0a0a0a greys, a #2563ef blue that belongs to no client, and a body face ('Public Sans') that appears nowhere else on this site. THE FIX IS NOT "LINK THE STOREFRONT SHEETS". theme.css and sf-base.css carry the storefront's layout grammar (grids, section rhythm, .sf-* components) and dropping them onto a fixed-sidebar dashboard drags that layout in. So this sheet re-declares the client's ramp LOCALLY and re-points the panel's own shadcn token contract at it. Nothing structural is imported; every rule below is a colour, a font or a contrast repair. CONTRAST IS ARITHMETIC HERE, NOT TASTE. Every pair below was measured with the WCAG relative-luminance formula against the composited ground and is recorded beside the token. Floors: 4.5:1 body, 3:1 large text and UI edges. Two rules from BUILD-DEFAULTS travel with them: de-emphasis is a SOLVED second colour, never an alpha fade (a faded ink walks back toward its own ground and no gate can measure it), and the chrome is OPAQUE. ORDER. The runner links this sheet LAST in — after fonts.css and after the Tailwind build — so an ordinary selector wins on equal specificity. `!important` appears in exactly one place: the [style*=] remaps at the bottom, which have to beat an inline attribute. That block is an idempotent CSS repair on purpose — the alternative was 400+ string edits inside a 616 KB document. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. The client's own ramp, declared locally ──────────────────────────── Copied from sf-refresh.css (the brand mark's own navy + cyan). Kept as the --cc-* names so a reader can diff the two files and see they agree. */ :root { --cc-navy-900: #071A33; --cc-navy-800: #0C2440; --cc-navy-700: #10294A; --cc-navy-600: #17406B; --cc-blue-600: #1C5E96; --cc-teal-700: #135C6E; --cc-teal-600: #1B7C8C; --cc-cyan-400: #16BFD1; --cc-cyan-300: #57D6E4; --cc-cyan-100: #C9F0F6; --cc-silver-500: #7E93A6; --cc-silver-200: #CBD9E4; --cc-ice-100: #E4F1F9; --cc-ice-50: #F1F8FC; --cc-metal-100: #F0F6FA; --cc-metal-300: #A6BACB; --cc-bg: #060E1A; --cc-surface: #0C1726; --cc-elevated: #142235; --cc-accent: #3FB6C9; /* Type. The panel already asks for var(--sf-font-display) on every heading and var(--sf-font-body) on ; neither was ever defined here, so the hard-coded fallbacks decided the panel's face. These are the client's real pair — the same two families theme.css hands the storefront. */ /* THE PAIR IS NOT DECLARED HERE ANY MORE (2026-08-20). It was, and it went stale the first time somebody moved the sitewide pair: this sheet is linked on the storefront too, so a bare :root pin here was a second source of truth racing the first. sf-final-typography.css now resolves the pair the way a browser does — theme.css then sf-refresh.css, last :root declaration wins — and is linked on all 26 pages including this one. One source, and it follows whoever changes the faces next. */ /* The brand-mark filters build.mjs injects flatten a two-colour lockup to a single silhouette. The chrome below is navy in BOTH themes, so the on-dark artwork is correct as drawn and needs no filter at all. */ --sf-admin-logo-filter: none; --sf-admin-logo-filter-dark: none; } /* ── 2. LIGHT — white page, brand ink ────────────────────────────────────── Measured on this ground: foreground #071A33 on #FFFFFF 17.53:1 muted ink #4E6377 on #FFFFFF 6.22 · on --muted #F1F8FC 5.80 pos #046B4E on #FFFFFF 6.53 · on --muted 6.08 info #175A8F on #FFFFFF 7.25 · on --muted 6.76 warn #A3480B on #FFFFFF 6.02 · on --muted 5.61 neg #B91C1C on #FFFFFF 6.47 · on --muted 6.03 primary fill #10294A with #F0F6FA ink 13.40 */ :root { --background: #FFFFFF; --foreground: #071A33; --card: #FFFFFF; --card-foreground: #071A33; --popover: #FFFFFF; --popover-foreground: #071A33; --muted: var(--cc-ice-50); --muted-foreground: #4E6377; --secondary: var(--cc-ice-50); --secondary-foreground: #071A33; --accent: var(--cc-ice-100); --accent-foreground: #071A33; --border: var(--cc-silver-200); --input: var(--cc-silver-200); --ring: #175A8F; --primary: var(--cc-navy-700); --primary-foreground: var(--cc-metal-100); --destructive: #B91C1C; --destructive-foreground: #FFFFFF; /* Semantic INK. Separate from the FILL tokens below on purpose: the same idea needs a dark value when it is type on the page and a mid value when it is a plate carrying white type, and collapsing the two is how a panel ends up with #34d399 text on white (1.92:1, measured). */ --pos: #046B4E; --info: #175A8F; --warn: #A3480B; --neg: #B91C1C; /* Semantic FILL — a plate that always carries WHITE type, so each of these clears 4.5:1 against #FFFFFF and is IDENTICAL in both themes. */ --pos-fill: #046B4E; /* white on it 6.53 */ --info-fill: #175A8F; /* white on it 7.25 */ --warn-fill: #A3480B; /* white on it 6.02 */ --neg-fill: #B91C1C; /* white on it 6.47 */ --ink-fill: #10294A; /* white on it 14.4 */ /* A second ink one step below --foreground, for the sub-labels the panel writes as #374151. Solved, not faded. */ --ink-2: #2A3D52; /* on #FFFFFF 11.13 · on --muted 10.37 */ --border-strong: #93A9BC; /* Charts. --chart-1 is used as a PLATE behind dark type in Finance, so it is kept light in both themes; the rest are the brand ramp in depth order. */ --chart-1: #A8D3F5; --chart-2: var(--cc-blue-600); --chart-3: #175A8F; --chart-4: var(--cc-teal-700); --chart-5: var(--cc-navy-700); --cc-chart-tick: #4E6377; --cc-chart-grid: rgb(78 99 119 / 0.18); } /* ── 3. DARK — the storefront's own deep navy, not near-neutral black ─────── Measured on --background #060E1A / --card #0C1726 / --accent #142235: foreground #F0F6FA 17.75 · 14.60 · 12.28 muted ink #A6BACB 9.68 · 9.01 · 8.02 pos #34D399 10.06 · 9.37 · 8.34 info #57D6E4 11.19 · 10.41 · 9.27 warn #FBBF24 11.59 · 10.79 · 9.60 neg #F87171 6.99 · 6.51 · 5.80 primary fill #3FB6C9 with #04141A ink 7.81 */ .dark { --background: var(--cc-bg); --foreground: var(--cc-metal-100); --card: var(--cc-surface); --card-foreground: var(--cc-metal-100); --popover: var(--cc-surface); --popover-foreground: var(--cc-metal-100); --muted: var(--cc-elevated); /* The stock sheet writes `--muted-foreground: var(--muted-foreground)` here. A self-referential custom property is a CYCLE: it computes to the guaranteed-invalid value, so every `var(--muted-foreground)` downstream falls back to the INHERITED colour instead of a muted one. That is why a .tab-count measured 1.09:1 — white on #f5f5f5. Pinned to a real hex. */ --muted-foreground: var(--cc-metal-300); --secondary: var(--cc-elevated); --secondary-foreground: var(--cc-metal-100); --accent: var(--cc-elevated); --accent-foreground: var(--cc-metal-100); --border: #24384F; --input: #2C4259; --ring: var(--cc-cyan-300); --primary: var(--cc-accent); --primary-foreground: #04141A; --destructive: #B91C1C; --destructive-foreground: #FFFFFF; --pos: #34D399; --info: var(--cc-cyan-300); --warn: #FBBF24; --neg: #F87171; --ink-2: #D6E3EC; /* on --background 14.4 · on --card 11.9 */ --border-strong: #43607D; --chart-1: #A8D3F5; --chart-2: #6FC3FF; --chart-3: var(--cc-cyan-300); --chart-4: #4A9BD4; --chart-5: var(--cc-silver-200); --cc-chart-tick: var(--cc-metal-300); --cc-chart-grid: rgb(166 186 203 / 0.18); } /* ── 4. CHROME — the sidebar is BRAND-COLOURED in both themes ────────────── Two things are fixed at once here. The panel painted the sidebar --sidebar (#fafafa light / #0a0a0a dark) and put LOGO-ONDARK.webp on it unconditionally — light artwork on a near-white bar, i.e. an invisible logo for the twelve daylight hours the theme script chooses light. Making the bar navy in both themes makes the on-dark lockup correct as drawn, and gives the console the same brand chrome the storefront carries. ink #F0F6FA on #071A33 16.00 dim ink #A6BACB on #071A33 8.72 (SOLVED, not an opacity fade) active bg #142235, ink #F0F6FA 14.71 accent #57D6E4 on #071A33 10.08 */ :root, .dark { --sidebar: var(--cc-navy-900); --sidebar-foreground: var(--cc-metal-100); --sidebar-border: #16324F; --sidebar-accent: var(--cc-elevated); --sidebar-accent-foreground: var(--cc-metal-100); --sidebar-primary: var(--cc-cyan-300); --sidebar-primary-foreground: #04141A; --sidebar-ring: var(--cc-cyan-300); } #admin-sidebar, #mobile-header { background: var(--cc-navy-900); border-color: #16324F; } /* .sidebar-link resolves var(--muted-foreground), which is now a PAGE ink and measures 2.0:1 on navy. Scoped to its own solved pair instead. */ #admin-sidebar .sidebar-link { color: var(--cc-metal-300); } /* 8.72 */ #admin-sidebar .sidebar-link:hover, #admin-sidebar .sidebar-link.active { background: var(--cc-elevated); color: var(--cc-metal-100); /* 14.71 */ } #admin-sidebar .sidebar-link.active { box-shadow: inset 2px 0 0 var(--cc-cyan-300); } #admin-sidebar .sidebar-link:focus-visible, #admin-sidebar .theme-toggle:focus-visible { outline: 2px solid var(--cc-cyan-300); outline-offset: 2px; } /* The group headings were a muted ink at opacity .62 — a fade on a bar the page scrolls under. Solved silver at full opacity instead. */ #admin-sidebar .nav-group { color: #9FB3C4 !important; opacity: 1 !important; } /* 8.07 */ /* "Admin Dashboard" under the lockup carries an INLINE var(--muted-foreground), which is a page ink and measures 2.80:1 on the navy bar. */ #admin-sidebar > div:first-child > div:last-child { color: var(--cc-metal-300) !important; } #admin-sidebar .theme-toggle { color: var(--cc-metal-300); border-color: #16324F; } #admin-sidebar .theme-toggle:hover { background: var(--cc-elevated); color: var(--cc-metal-100); } #mobile-header #hamburger-btn { background: var(--cc-elevated); border-color: #16324F; color: var(--cc-metal-100); } /* The logo is the client's own two-colour artwork now — no silhouette filter. */ #admin-sidebar .brand-logo, #mobile-header .brand-logo, .dark #admin-sidebar .brand-logo, .dark #mobile-header .brand-logo { filter: none; } /* ── 5. Type ─────────────────────────────────────────────────────────────── body already reads var(--sf-font-body) and every heading var(--sf-font-display); §1 defines both, so this only carries the numerals rule. Tabular figures make a money column line up — every table in Orders, Stock and Finance is money. */ :is(#admin-shell,#order-modal,#manual-order-modal,#delete-modal,#contact-drawer) table td, :is(#admin-shell,#order-modal,#manual-order-modal,#delete-modal,#contact-drawer) table th, :is(#admin-shell,#order-modal,#manual-order-modal,#delete-modal,#contact-drawer) .stat-card p, :is(#admin-shell,#order-modal,#manual-order-modal,#delete-modal,#contact-drawer) input[type="number"] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ── 6. Components ─────────────────────────────────────────────────────────*/ .btn-teal { background: var(--info-fill); color: #FFFFFF; } /* 7.25 */ .btn-red { background: var(--neg-fill); color: #FFFFFF; } /* 6.47 */ .btn-dark { background: var(--primary); color: var(--primary-foreground); } .btn:focus-visible, .test-email-pill:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgb(23 90 143 / 0.22); } .dark .input:focus { box-shadow: 0 0 0 3px rgb(87 214 228 / 0.22); } /* Status badges. The stock pairs were tuned for a neutral panel and several measured under 3:1 on this ground; each pair below is solved. */ .badge-pending_payment { background: rgb(163 72 11 / 0.12); color: var(--warn); } .badge-processing { background: rgb(23 90 143 / 0.12); color: var(--info); } .badge-shipped { background: rgb(23 90 143 / 0.12); color: var(--info); } .badge-delivered { background: rgb(4 107 78 / 0.12); color: var(--pos); } .badge-refunded { background: var(--muted); color: var(--muted-foreground); } .badge-cancelled { background: var(--muted); color: var(--muted-foreground); } .dark .badge-pending_payment { background: rgb(251 191 36 / 0.16); color: var(--warn); } .dark .badge-processing, .dark .badge-shipped { background: rgb(87 214 228 / 0.14); color: var(--info); } .dark .badge-delivered { background: rgb(52 211 153 / 0.14); color: var(--pos); } .dark .badge-refunded, .dark .badge-cancelled { background: var(--muted); color: var(--muted-foreground); } /* Payments re-declares all of these at id specificity FROM A