/* Group accents for Biztek.io console surfaces.
 *
 * RULE (set 2026-10-31): a service or page lives under one Backoffice group
 * (IT Services, Operations, Billing, Dev/Ops, Marketing, Consulting) and wears
 * THAT group's accent, in the Central Auth console look, in light and dark.
 * The structure, sizes and neutrals stay console.css; only the accent changes.
 *
 * Use: load AFTER console.css and set data-group on <html>:
 *     <html data-group="dev-ops">
 * No attribute (or "it-services") keeps the console's default indigo.
 *
 * The hues are the Backoffice category hues (app/static/app.css --cat-*).
 * They are bright, so they are used as-is only on dark surfaces. On the light
 * surface the SAME hue steps darker (same trick console.css plays with indigo
 * #4c51bf / #667eea) so links, text buttons and white button labels hold
 * >= 4.5:1. Measured 2026-10-31:
 *   dark  accent on #141720   dev-ops 9.62  marketing 6.52  operations 7.37  billing 7.18  consulting 4.86
 *   dark  label #0d0f18 on accent  10.27 / 6.96 / 7.87 / 7.67 / 5.19
 *   light accent on #ffffff   5.05 / 5.05 / 5.00 / 5.00 / 5.07  (on #f5f6fa >= 4.63)
 *   light hover on #ffffff    7.10 / 7.07 / 7.13 / 7.11 / 7.13
 *
 * Per group there are three blocks, kept in the same order as console.css's
 * theme blocks and edited together: light, system-dark, explicit-dark.
 * --g-pure and --g-hi are the same in both themes (used on the always-dark
 * top bar, strip, hero and tab bar). --g, --g-lt, --g-dk and --g-tint are the
 * theme-dependent set that feeds console.css's --accent tokens.
 */

/* dev-ops */
:root[data-group="dev-ops"] {
  --g-pure: #2dd4bf; --g-hi: #7ff0e2;
  --g: #197c70; --g-lt: #2dd4bf; --g-dk: #146359; --g-tint: #e8f2f1; --g-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root[data-group="dev-ops"]:not([data-theme="light"]) {
  --g-pure: #2dd4bf; --g-hi: #7ff0e2;
  --g: #2dd4bf; --g-lt: #7ff0e2; --g-dk: #7ff0e2; --g-tint: #183136; --g-on: #0d0f18;
}
}
:root[data-group="dev-ops"][data-theme="dark"] {
  --g-pure: #2dd4bf; --g-hi: #7ff0e2;
  --g: #2dd4bf; --g-lt: #7ff0e2; --g-dk: #7ff0e2; --g-tint: #183136; --g-on: #0d0f18;
}

/* marketing */
:root[data-group="marketing"] {
  --g-pure: #e07ab8; --g-hi: #eb9cca;
  --g: #c62e8a; --g-lt: #e07ab8; --g-dk: #9f256f; --g-tint: #f9eaf3; --g-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root[data-group="marketing"]:not([data-theme="light"]) {
  --g-pure: #e07ab8; --g-hi: #eb9cca;
  --g: #e07ab8; --g-lt: #eb9cca; --g-dk: #eb9cca; --g-tint: #312535; --g-on: #0d0f18;
}
}
:root[data-group="marketing"][data-theme="dark"] {
  --g-pure: #e07ab8; --g-hi: #eb9cca;
  --g: #e07ab8; --g-lt: #eb9cca; --g-dk: #eb9cca; --g-tint: #312535; --g-on: #0d0f18;
}

/* operations */
:root[data-group="operations"] {
  --g-pure: #d99a3f; --g-hi: #e6b876;
  --g: #97651e; --g-lt: #d99a3f; --g-dk: #775018; --g-tint: #f5f0e8; --g-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root[data-group="operations"]:not([data-theme="light"]) {
  --g-pure: #d99a3f; --g-hi: #e6b876;
  --g: #d99a3f; --g-lt: #e6b876; --g-dk: #e6b876; --g-tint: #302924; --g-on: #0d0f18;
}
}
:root[data-group="operations"][data-theme="dark"] {
  --g-pure: #d99a3f; --g-hi: #e6b876;
  --g: #d99a3f; --g-lt: #e6b876; --g-dk: #e6b876; --g-tint: #302924; --g-on: #0d0f18;
}

/* billing */
:root[data-group="billing"] {
  --g-pure: #46b880; --g-hi: #7ecda3;
  --g: #307d57; --g-lt: #46b880; --g-dk: #266345; --g-tint: #eaf2ee; --g-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root[data-group="billing"]:not([data-theme="light"]) {
  --g-pure: #46b880; --g-hi: #7ecda3;
  --g: #46b880; --g-lt: #7ecda3; --g-dk: #7ecda3; --g-tint: #1b2e2d; --g-on: #0d0f18;
}
}
:root[data-group="billing"][data-theme="dark"] {
  --g-pure: #46b880; --g-hi: #7ecda3;
  --g: #46b880; --g-lt: #7ecda3; --g-dk: #7ecda3; --g-tint: #1b2e2d; --g-on: #0d0f18;
}

/* consulting */
:root[data-group="consulting"] {
  --g-pure: #e2574c; --g-hi: #ee8a82;
  --g: #d12f22; --g-lt: #e2574c; --g-dk: #a8251b; --g-tint: #faeae9; --g-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root[data-group="consulting"]:not([data-theme="light"]) {
  --g-pure: #e2574c; --g-hi: #ee8a82;
  --g: #e2574c; --g-lt: #ee8a82; --g-dk: #ee8a82; --g-tint: #312026; --g-on: #0d0f18;
}
}
:root[data-group="consulting"][data-theme="dark"] {
  --g-pure: #e2574c; --g-hi: #ee8a82;
  --g: #e2574c; --g-lt: #ee8a82; --g-dk: #ee8a82; --g-tint: #312026; --g-on: #0d0f18;
}

/* ---- shared wiring: every group maps onto console.css's tokens ---- */

:root[data-group]:not([data-group="it-services"]) {
  --accent: var(--g);
  --accent-lt: var(--g-lt);
  --accent-dk: var(--g-dk);
  --accent-tint: var(--g-tint);
  --on-accent: var(--g-on);
  --teal: var(--g-pure);
  --focus-ring: color-mix(in srgb, var(--g-lt) 22%, transparent);
}
:root[data-group]:not([data-group="it-services"]) .c-strip {
  background: linear-gradient(90deg, var(--g-hi), var(--g-pure) 50%, var(--g-hi));
}
:root[data-group]:not([data-group="it-services"]) .c-chip {
  color: var(--g-hi);
  background: color-mix(in srgb, var(--g-pure) 14%, transparent);
  border-color: color-mix(in srgb, var(--g-pure) 32%, transparent);
}
:root[data-group]:not([data-group="it-services"]) .c-nav a[aria-current="page"]::before {
  background: linear-gradient(180deg, var(--g-hi), var(--g-pure));
}
:root[data-group]:not([data-group="it-services"]) .c-hero::before {
  background:
    radial-gradient(600px 220px at 85% 0%, color-mix(in srgb, var(--g-pure) 32%, transparent), transparent 70%),
    radial-gradient(420px 200px at 60% 120%, color-mix(in srgb, var(--g-hi) 20%, transparent), transparent 70%);
}
:root[data-group]:not([data-group="it-services"]) .c-tile--g { background: var(--g-pure); color: #0d0f18; }
@media (max-width: 1024px) {
  :root[data-group]:not([data-group="it-services"]) .c-tabbar a:hover { color: var(--g-hi); }
  :root[data-group]:not([data-group="it-services"]) .c-tabbar a[aria-current="page"] { color: var(--g-pure); }
}