/* * Korzaro — brand palette tokens (single source of truth). * * Loaded by UNFOLD["STYLES"] in ohlook/settings/base.py — every admin page * gets these vars in :root. Values come from the "Obloha" palette Mira * approved on 2026-07-15 (docs/discovery/mockup-ui.html, palette switcher; * ADR 0002). Sky-blue accent on airy blue-gray neutrals — deliberately * positive and NOT OutOfDark's golden-brown. * * Three layers (structure adapted from OutOfDark): * 1. PRIMITIVES — raw color scales (mist neutral, sea accent, state * ramps). No semantic meaning, just named values. * 2. SEMANTIC — meaning-based aliases (surface / ink / accent / * success / warning / error). Components use THESE, not primitives. * Dark mode flips only this layer (html.dark below), so components * need no per-component dark rules. * 3. STATUS — data-source / insight status colors, mapped to * semantic tokens (connected / limited / waiting / error). * * Adding a color: pick from existing primitives if possible; add a semantic * token only for a reusable meaning; never reach for raw hex inline — the * design-drift gate warns on hardcoded colors in templates. * * Colors are raw `R G B` triplets so components can apply opacity via * `rgb(var(--ohl-...) / 0.5)`. */ /* * "Star Admin 2" theme layer for the Korzaro admin. * * Every value here was measured off the reference demo's computed styles * (demo.bootstrapdash.com/star-admin-2-pro, vertical-default-light), never * guessed from a screenshot — the demo's signature turned out to be the * opposite of what it looks like: cards carry no border and no shadow at all, * and the sidebar sits on the same grey as the page. * * Loaded last in UNFOLD["STYLES"], so it wins on equal specificity over the * .ohl-* component families in admin_base.css. It also restates Unfold's own * --color-primary-* scale, which is how the Tailwind-side chrome (links, * focus rings, the active sidebar item) follows the accent. * * Measured reference values: * page / sidebar #f4f5f7 accent #1f3bb3 * card #fff, border 0, shadow none, radius 8px, body 24px * card title 16px / 800 KPI value 26px / 700 * KPI label 13px / 500 table head 11px / 700 / uppercase / #a3a3a3 * sidebar link 13px / 700, padding 10px 35px, icon 22px, gap 16px * sidebar active white, radius 0 20px 0 0 * button radius 5px, padding 14px 24px, 14px * badge pill, padding 6px 9px, 12px * content padding 24px 35px 24px 56px * typeface Manrope (self-hosted, see shared/manrope.css) */ /* ========================================================================== * 1. PALETTE — ours, not the reference's. * * An earlier pass imported the demo's indigo over the whole sky ramp. Mira's * call on 5. 9. 2026: the colours stay the approved "Obloha" palette from the * living styleguide (ADR 0002) and only the SHAPE of the reference is taken. * Its indigo read as aggressive next to our own blue, and a theme layer is no * place to quietly replace a decided brand colour. * * So this section redefines almost nothing. The one thing it must change is * the page ground: the design needs white cards to sit on something, and * --ohl-bg pointed at the lightest step of the neutral ramp, which is all but * white. It moves one step down the SAME ramp — a palette value, not a new * colour. * ========================================================================== */ :root { /* -------- Layer 1: PRIMITIVES — raw scales -------- */ /* Mist — neutral foundation (cool gray-blue). Anchors are the exact * "Obloha" neutrals of both themes: * 0 = light surface #ffffff 50 = light page bg #f3f7fb * 100 = dark-mode ink #e5ecf4 200 = light border #dfe8f0 * 400 = dark-mode muted #8da1b5 500 = light muted #5a6b7b * 700 = dark border #273444 850 = light ink #22303c * 900 = dark surface #171f2a 950 = dark page bg #10161e */ --ohl-mist-0: 255 255 255; --ohl-mist-50: 243 247 251; --ohl-mist-100: 229 236 244; --ohl-mist-200: 223 232 240; --ohl-mist-400: 141 161 181; --ohl-mist-500: 90 107 123; --ohl-mist-700: 39 52 68; --ohl-mist-850: 34 48 60; --ohl-mist-900: 23 31 42; --ohl-mist-950: 16 22 30; /* Sky — the Korzaro accent (sky blue, "Obloha"). Anchors from the mockup: * 50 = light accent-soft #e3effa 200 = light accent-line #bedaf1 * 400 = dark-mode accent #7fbcec 600 = light accent #256faf * 800 = dark accent-line #2e4a63 900 = dark accent-soft #1b2d40 * 950 = dark accent-ink #0d1520 * Steps 100/300/500/700 are interpolated between the anchors. The same * ramp feeds UNFOLD["COLORS"]["primary"] in settings/base.py — keep the * two in sync when editing. */ --ohl-sky-50: 227 239 250; --ohl-sky-100: 209 229 246; --ohl-sky-200: 190 218 241; --ohl-sky-300: 158 203 239; --ohl-sky-400: 127 188 236; --ohl-sky-500: 94 165 225; --ohl-sky-600: 37 111 175; --ohl-sky-700: 47 110 165; --ohl-sky-800: 46 74 99; --ohl-sky-900: 27 45 64; --ohl-sky-950: 13 21 32; /* State ramps — exact mockup values for both themes: * 600 = light-mode fg, 50 = light-mode bg, * 300 = dark-mode fg, 900 = dark-mode bg. */ --ohl-green-600: 26 122 74; /* ok fg (light) #1a7a4a */ --ohl-green-50: 227 242 233; /* ok bg (light) #e3f2e9 */ --ohl-green-300: 94 199 143; /* ok fg (dark) #5ec78f */ --ohl-green-900: 27 47 36; /* ok bg (dark) #1b2f24 */ --ohl-amber-600: 150 97 15; /* warn fg (light) #96610f */ --ohl-amber-50: 249 239 219; /* warn bg (light) #f9efdb */ --ohl-amber-300: 226 169 78; /* warn fg (dark) #e2a94e */ --ohl-amber-900: 51 41 22; /* warn bg (dark) #332916 */ --ohl-red-600: 179 53 43; /* err fg (light) #b3352b */ --ohl-red-50: 249 230 227; /* err bg (light) #f9e6e3 */ --ohl-red-300: 239 141 132; /* err fg (dark) #ef8d84 */ --ohl-red-900: 57 32 32; /* err bg (dark) #392020 */ /* Pastel ramps — channel identity hues (Mira, 2026-07-16: "blue stays * primary, but not everything should be blue"). Same 4-step shape as the * state ramps: 600 light-fg, 50 light-bg, 300 dark-fg, 900 dark-bg. * These are identities, not judgments — states keep green/amber/red. */ --ohl-mint-600: 15 118 110; /* teal-green #0f766e */ --ohl-mint-50: 223 242 239; /* #dff2ef */ --ohl-mint-300: 94 210 191; /* #5ed2bf */ --ohl-mint-900: 19 45 42; /* #132d2a */ --ohl-aqua-600: 14 116 144; /* cyan #0e7490 */ --ohl-aqua-50: 222 240 247; /* #def0f7 */ --ohl-aqua-300: 103 200 226; /* #67c8e2 */ --ohl-aqua-900: 20 44 54; /* #142c36 */ --ohl-lilac-600: 109 82 190; /* blue-violet #6d52be */ --ohl-lilac-50: 237 233 249; /* #ede9f9 */ --ohl-lilac-300: 178 158 235; /* #b29eeb */ --ohl-lilac-900: 40 34 64; /* #282240 */ --ohl-indigo-600: 61 74 168; /* deep blue #3d4aa8 */ --ohl-indigo-50: 229 232 248; /* #e5e8f8 */ --ohl-indigo-300: 146 158 232; /* #929ee8 */ --ohl-indigo-900: 26 30 60; /* #1a1e3c */ --ohl-plum-600: 143 62 157; /* red-violet #8f3e9d */ --ohl-plum-50: 246 232 248; /* #f6e8f8 */ --ohl-plum-300: 216 150 226; /* #d896e2 */ --ohl-plum-900: 52 30 56; /* #341e38 */ --ohl-peach-600: 171 82 38; /* warm orange #ab5226 */ --ohl-peach-50: 250 235 226; /* #faebe2 */ --ohl-peach-300: 240 160 118; /* #f0a076 */ --ohl-peach-900: 61 36 24; /* #3d2418 */ --ohl-rose-600: 184 60 105; /* pink #b83c69 */ --ohl-rose-50: 250 229 238; /* #fae5ee */ --ohl-rose-300: 240 142 178; /* #f08eb2 */ --ohl-rose-900: 61 28 40; /* #3d1c28 */ --ohl-lime-600: 98 118 20; /* yellow-green #627614 */ --ohl-lime-50: 240 245 220; /* #f0f5dc */ --ohl-lime-300: 186 210 96; /* #bad260 */ --ohl-lime-900: 40 48 20; /* #283014 */ --ohl-sand-600: 140 100 54; /* bronze #8c6436 */ --ohl-sand-50: 246 238 226; /* #f6eee2 */ --ohl-sand-300: 214 172 120; /* #d6ac78 */ --ohl-sand-900: 54 42 28; /* #362a1c */ /* Slate — the Web section (2026-07-22). The site itself is the ground every * channel stands on, not a channel competing with them, so it wears the one * deliberately unsaturated identity in the set. */ --ohl-slate-600: 71 85 105; /* blue-gray #475569 */ --ohl-slate-50: 234 238 243; /* #eaeef3 */ --ohl-slate-300: 160 176 195; /* #a0b0c3 */ --ohl-slate-900: 30 37 47; /* The page ground is the reference's neutral grey, and it is the ONE colour in the app that does not come from our palette. Our own ramp is blue-tinted all the way down, and across a whole screen that read as too much blue at once (Mira, 5. 9. 2026). Everything drawn ON the ground keeps our colours. */ --ohl-bg: 244 245 247; /* page background */ --ohl-surface: var(--ohl-mist-0); /* cards, panels */ --ohl-ink: var(--ohl-mist-850); /* body text */ --ohl-muted: var(--ohl-mist-500); /* secondary text */ --ohl-line: var(--ohl-mist-200); /* borders, dividers */ /* Accent (primary action + active state) */ --ohl-accent: var(--ohl-sky-600); --ohl-accent-ink: var(--ohl-mist-0); /* text on accent */ --ohl-accent-soft: var(--ohl-sky-50); /* quiet accent background */ --ohl-accent-line: var(--ohl-sky-200); /* accent-tinted border */ --ohl-editorial-bg: var(--ohl-peach-50); /* States */ --ohl-success: var(--ohl-green-600); --ohl-success-bg: var(--ohl-green-50); --ohl-warning: var(--ohl-amber-600); --ohl-warning-bg: var(--ohl-amber-50); --ohl-error: var(--ohl-red-600); --ohl-error-bg: var(--ohl-red-50); /* Separation is carried by white-on-grey and whitespace, not by elevation. */ --ohl-shadow: none; --ohl-shadow-pop: 0 8px 24px rgb(16 28 40 / 0.14); --ohl-font-sans: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* -------- Layer 3: STATUS — data-source & insight states -------- */ /* Connection states from the mockup (settings -> sources table): * connected / limited (data with caveats) / error / idle (waiting). */ --ohl-source-ok: var(--ohl-success); --ohl-source-warn: var(--ohl-warning); --ohl-source-err: var(--ohl-error); --ohl-source-idle: var(--ohl-muted); /* -------- Layer 3b: CHANNEL identity — one hue per section -------- * Used by source chips (.ohl-src--*) and chart tints (.ohl-tint--*) so a * block's origin is readable at a glance. NOT --ohl-source-* — that * namespace means connection state, not identity. Traffic keeps the brand * sky; commerce (sand) waits for Shoptet. */ --ohl-ch-traffic: var(--ohl-sky-600); --ohl-ch-traffic-bg: var(--ohl-sky-50); --ohl-ch-seo: var(--ohl-mint-600); --ohl-ch-seo-bg: var(--ohl-mint-50); --ohl-ch-ppc: var(--ohl-lilac-600); --ohl-ch-ppc-bg: var(--ohl-lilac-50); --ohl-ch-social: var(--ohl-plum-600); --ohl-ch-social-bg: var(--ohl-plum-50); --ohl-ch-mailing: var(--ohl-green-600); --ohl-ch-mailing-bg: var(--ohl-green-50); --ohl-ch-feeds: var(--ohl-aqua-600); --ohl-ch-feeds-bg: var(--ohl-aqua-50); --ohl-ch-reviews: var(--ohl-peach-600); --ohl-ch-reviews-bg: var(--ohl-peach-50); --ohl-ch-ux: var(--ohl-plum-600); --ohl-ch-ux-bg: var(--ohl-plum-50); --ohl-ch-commerce: var(--ohl-sand-600); --ohl-ch-commerce-bg: var(--ohl-sand-50); --ohl-ch-customers: var(--ohl-rose-600); --ohl-ch-customers-bg: var(--ohl-rose-50); --ohl-ch-products: var(--ohl-indigo-600); --ohl-ch-products-bg: var(--ohl-indigo-50); --ohl-ch-content: var(--ohl-lime-600); --ohl-ch-content-bg: var(--ohl-lime-50); --ohl-ch-web: var(--ohl-slate-600); --ohl-ch-web-bg: var(--ohl-slate-50); --ohl-ch-competitors: var(--ohl-slate-600); --ohl-ch-competitors-bg: var(--ohl-slate-50); /* Not a channel: the gross-margin card of the hub's finance row, which wears its hue as a background and so needs a dark pair like the channels do. Mint on purpose, under its own name (admin_base.css, .ohl-hue--margin). */ --ohl-ch-margin: var(--ohl-mint-600); --ohl-ch-margin-bg: var(--ohl-mint-50); /* A role the reference needs that our palette had no name for: the ink of the navigation, quieter than page text. An existing ramp step, not a new colour. (`--ohl-star-field` was a third alias for `--ohl-line` and the fields now use that directly.) */ --ohl-star-nav: var(--ohl-mist-850); --ohl-star-nav-heading: var(--ohl-mist-850); /* -------- Layer 3c: PARTS OF ONE WHOLE -------- * Telling apart the few named pieces a single total is made of (the ad * platforms behind one month's spend). This is the only place in the app * where colour means "which of these", not "where this came from" — and it * needs its own names for exactly that reason: --ohl-ch-* would put a * channel's meaning on a slice that has nothing to do with that channel. * Existing ramp steps, no new colour values; the manual in Notion has * nothing new to carry. * Chosen by measurement, not by eye — purple / orange / blue clear the * colour-blindness separation floor with room to spare (worst adjacent pair * ΔE 20 against a floor of 8) where the brand's quieter teals and greens do * not. A part's slot is FIXED by its position in the list, never by its * size, so a slice keeps its colour in the month it outgrows its neighbour. * Ordered dark → warm → cool so the first slot stays in the family the PPC * section already wears. */ --ohl-part-1: var(--ohl-lilac-600); --ohl-part-2: var(--ohl-peach-600); --ohl-part-3: var(--ohl-sky-600); } /* ================================================================== * DARK MODE — semantic overrides only (django-unfold toggles html.dark). * Components that use Layer 2 tokens flip automatically. * ================================================================== */ html.dark { /* Dark mode already flips the semantic layer in brand_tokens.css; only the ground and these two roles need restating. */ --ohl-bg: var(--ohl-mist-950); --ohl-surface: var(--ohl-mist-900); --ohl-ink: var(--ohl-mist-100); --ohl-muted: var(--ohl-mist-400); --ohl-line: var(--ohl-mist-700); --ohl-accent: var(--ohl-sky-400); --ohl-accent-ink: var(--ohl-sky-950); --ohl-accent-soft: var(--ohl-sky-900); --ohl-accent-line: var(--ohl-sky-800); --ohl-editorial-bg: var(--ohl-peach-900); --ohl-success: var(--ohl-green-300); --ohl-success-bg: var(--ohl-green-900); --ohl-warning: var(--ohl-amber-300); --ohl-warning-bg: var(--ohl-amber-900); --ohl-error: var(--ohl-red-300); --ohl-error-bg: var(--ohl-red-900); --ohl-shadow: none; --ohl-shadow-pop: 0 8px 24px rgb(0 0 0 / 0.55); --ohl-ch-traffic: var(--ohl-sky-400); --ohl-ch-traffic-bg: var(--ohl-sky-900); --ohl-ch-seo: var(--ohl-mint-300); --ohl-ch-seo-bg: var(--ohl-mint-900); --ohl-ch-ppc: var(--ohl-lilac-300); --ohl-ch-ppc-bg: var(--ohl-lilac-900); --ohl-ch-social: var(--ohl-plum-300); --ohl-ch-social-bg: var(--ohl-plum-900); --ohl-ch-mailing: var(--ohl-green-300); --ohl-ch-mailing-bg: var(--ohl-green-900); --ohl-ch-feeds: var(--ohl-aqua-300); --ohl-ch-feeds-bg: var(--ohl-aqua-900); --ohl-ch-reviews: var(--ohl-peach-300); --ohl-ch-reviews-bg: var(--ohl-peach-900); --ohl-ch-ux: var(--ohl-plum-300); --ohl-ch-ux-bg: var(--ohl-plum-900); --ohl-ch-commerce: var(--ohl-sand-300); --ohl-ch-commerce-bg: var(--ohl-sand-900); --ohl-ch-customers: var(--ohl-rose-300); --ohl-ch-customers-bg: var(--ohl-rose-900); --ohl-ch-products: var(--ohl-indigo-300); --ohl-ch-products-bg: var(--ohl-indigo-900); --ohl-ch-content: var(--ohl-lime-300); --ohl-ch-content-bg: var(--ohl-lime-900); --ohl-ch-web: var(--ohl-slate-300); --ohl-ch-web-bg: var(--ohl-slate-900); --ohl-ch-competitors: var(--ohl-slate-300); --ohl-ch-competitors-bg: var(--ohl-slate-900); --ohl-ch-margin: var(--ohl-mint-300); --ohl-ch-margin-bg: var(--ohl-mint-900); --ohl-star-nav: var(--ohl-mist-100); --ohl-star-nav-heading: var(--ohl-mist-100); /* Parts of one whole, dark. Same three hues one ramp step lighter — the move every channel identity above makes, for the same reason: a 600 step that carries a white card cannot carry a near-black one. */ --ohl-part-1: var(--ohl-lilac-300); --ohl-part-2: var(--ohl-peach-300); --ohl-part-3: var(--ohl-sky-300); }