/* =========================================================== APLO DESIGN SYSTEM — Project Themes themes.css One AploSnab product = one accent colour. Every product shares the same warm-neutral surfaces, ink, spacing, type and status tones; only the accent hue changes, so the family feels related while each app owns a colour. Each theme sets two scalars — hue (--accent-h) and chroma (--accent-c) — and every accent shade in colors_and_type.css re-derives in oklch(). Chroma is tuned per hue so a green and a blue read as equally "branded", never one washed-out. Hues are spaced ~22° apart and assigned by product meaning: money→green, chat→blue, AI→indigo, auth→red, etc. Status tones (pending / ok / partial / reject / muted) are NEVER themed — they mean the same thing across the whole family. Load AFTER colors_and_type.css. =========================================================== */ /* Re-derive the accent shades ON the themed element itself, so a theme class works at ANY level — on OR on a nested wrapper. (Custom properties carry their *computed* value down the tree, so overriding only --accent-h on a descendant would not recompute --accent without this block.) */ [class^="theme-"], [class*=" theme-"] { --accent: oklch(0.66 var(--accent-c) var(--accent-h)); --accent-strong: oklch(0.58 calc(var(--accent-c) + 0.005) var(--accent-h)); --accent-ink: oklch(0.45 calc(var(--accent-c) * 0.73) var(--accent-h)); --accent-soft: oklch(0.96 calc(var(--accent-c) * 0.18) var(--accent-h)); --accent-soft-2: oklch(0.92 calc(var(--accent-c) * 0.30) var(--accent-h)); } /* hue + chroma are scalar inputs to oklch(), not colours themselves, hence /* @kind other *\/. Trailing label = product + domain. */ /* —— Warm: supply, hub, loyalty ——————————————————————————— */ .theme-aplosnab { --accent-h: 18 /* @kind other */; --accent-c: .165 /* @kind other */; } /* Brick — AploSnab · ресторан · aplosnab.ru */ .theme-aploservices { --accent-h: 42 /* @kind other */; --accent-c: .160 /* @kind other */; } /* Orange — AploServices · hub · aplo.pw */ .theme-aploloyal { --accent-h: 72 /* @kind other */; --accent-c: .150 /* @kind other */; } /* Gold — AploLoyal · loyalty.aplosnab.ru */ /* —— Green: warehouse, vet, wallet ———————————————————————— */ .theme-aplosklad { --accent-h: 105 /* @kind other */; --accent-c: .155 /* @kind other */; } /* Lime — AploSklad · sklad.aplosnab.ru */ .theme-aplovet { --accent-h: 142 /* @kind other */; --accent-c: .140 /* @kind other */; } /* Green — AploVet · vet.aplosnab.ru */ .theme-aplowallet { --accent-h: 162 /* @kind other */; --accent-c: .135 /* @kind other */; } /* Emerald— AploWallet · wallet.aplosnab.ru */ /* —— Cool: analytics, travel, network, chat ——————————————— */ .theme-aplork { --accent-h: 182 /* @kind other */; --accent-c: .105 /* @kind other */; } /* Teal — AploSnab RK7 · rk.aplosnab.ru */ .theme-aplotravel { --accent-h: 202 /* @kind other */; --accent-c: .110 /* @kind other */; } /* Cyan — AploTravel · travel.aplo.pw */ .theme-aplorouter { --accent-h: 224 /* @kind other */; --accent-c: .130 /* @kind other */; } /* Sky — AploRouter · router.aplo.pw */ .theme-aplomatrix { --accent-h: 248 /* @kind other */; --accent-c: .150 /* @kind other */; } /* Blue — AploMatrix · chat.aplo.pw */ /* —— Deep: AI, community, wardrobe, guide, auth ——————————— */ .theme-aplogate { --accent-h: 270 /* @kind other */; --accent-c: .160 /* @kind other */; } /* Indigo — AploGate · gate.aplo.pw */ .theme-aplocommunity{ --accent-h: 292 /* @kind other */; --accent-c: .160 /* @kind other */; } /* Violet — AploCommunity · community.aplo.pw */ .theme-aplorobe { --accent-h: 312 /* @kind other */; --accent-c: .165 /* @kind other */; } /* Plum — AploRobe · robe.aplo.pw */ .theme-nebarista { --accent-h: 332 /* @kind other */; --accent-c: .160 /* @kind other */; } /* Magenta— nebarista.ru · гид */ .theme-aplokey { --accent-h: 354 /* @kind other */; --accent-c: .160 /* @kind other */; } /* Crimson— AploKey · key.aplo.pw · auth/SSO */ /* —— Neutral / monochrome ———————————————————————————————— For internal tools & portals that want chrome-only branding — AploDev, AploDocs, 1C Dashboard, AploPA, AWM/AUM, NetR, etc. Chroma near-zero → accent shades become warm graphite. */ .theme-aplomono { --accent-h: 250 /* @kind other */; --accent-c: .010 /* @kind other */; } /* Graphite — internal / portals */