/**
 * kol-opaque.css — Opaque neutral scale (KOL tier)
 *
 * The SOLID mirror of kol-opacity.css. Same 14 stops, same source ink — the
 * only difference is what the ink is mixed INTO:
 *
 *   fg  →  color-mix(ink X%, transparent)   — alpha foreground; bg bleeds through
 *   oq  →  color-mix(ink X%, surface)        — opaque neutral; flattened onto surface
 *
 * Use `oq` when you need an OPAQUE grey (cover layer, chip over a photo, any
 * fill that must hide what's behind it). Use `fg` when you want the foreground
 * tinting a transparent layer. They are different primitives — `oq` is not a
 * transparency, it is a baked grey.
 *
 * Auto-themes for free: --kol-surface-on-primary and --kol-surface-primary both
 * flip in dark mode, so color-mix recomputes. No hardcoded light/dark blocks —
 * but the block is declared on the theme selectors, not `:root` alone (0.52.0,
 * nested-theme-scope), so a themed SUBTREE recomputes too; see kol-opacity.css.
 *
 * Scale: 01, 02, 04, 08, 12, 16, 24, 32, 40, 48, 64, 80, 88, 96 (14 stops)
 *
 * Tier pairs:
 * - Standard (ink-on-primary flattened onto --kol-surface-primary)
 * - Inverse  (ink-on-inverse flattened onto --kol-surface-inverse)
 * - Absolute (ab / ab-inverse — black and white against each other, so the
 *   grey is opaque AND theme-invariant; 2026-08-28)
 *
 * Layers:
 * - Tokens (--kol-oq-*, --kol-oq-inverse-*) for use in CSS rules
 * - Classes (.bg-oq-*, .text-oq-*, .border-oq-* + inverse + hover) for JSX
 */

:root,
:is([data-theme="light"], .light),
:is([data-theme="dark"], .dark) {
  /* ============================================================================
   * TOKENS — Standard tier (ink-on-primary, flattened onto primary surface)
   * ============================================================================ */

  --kol-oq-01: color-mix(in srgb, var(--kol-surface-on-primary) 1%, var(--kol-surface-primary));
  --kol-oq-02: color-mix(in srgb, var(--kol-surface-on-primary) 2%, var(--kol-surface-primary));
  --kol-oq-04: color-mix(in srgb, var(--kol-surface-on-primary) 4%, var(--kol-surface-primary));
  --kol-oq-08: color-mix(in srgb, var(--kol-surface-on-primary) 8%, var(--kol-surface-primary));
  --kol-oq-12: color-mix(in srgb, var(--kol-surface-on-primary) 12%, var(--kol-surface-primary));
  --kol-oq-16: color-mix(in srgb, var(--kol-surface-on-primary) 16%, var(--kol-surface-primary));
  --kol-oq-24: color-mix(in srgb, var(--kol-surface-on-primary) 24%, var(--kol-surface-primary));
  --kol-oq-32: color-mix(in srgb, var(--kol-surface-on-primary) 32%, var(--kol-surface-primary));
  --kol-oq-40: color-mix(in srgb, var(--kol-surface-on-primary) 40%, var(--kol-surface-primary));
  --kol-oq-48: color-mix(in srgb, var(--kol-surface-on-primary) 48%, var(--kol-surface-primary));
  --kol-oq-64: color-mix(in srgb, var(--kol-surface-on-primary) 64%, var(--kol-surface-primary));
  --kol-oq-72: color-mix(in srgb, var(--kol-surface-on-primary) 72%, var(--kol-surface-primary));
  --kol-oq-80: color-mix(in srgb, var(--kol-surface-on-primary) 80%, var(--kol-surface-primary));
  --kol-oq-88: color-mix(in srgb, var(--kol-surface-on-primary) 88%, var(--kol-surface-primary));
  --kol-oq-96: color-mix(in srgb, var(--kol-surface-on-primary) 96%, var(--kol-surface-primary));

  /* ============================================================================
   * TOKENS — Inverse tier (ink-on-inverse, flattened onto inverse surface)
   * ============================================================================ */

  --kol-oq-inverse-01: color-mix(in srgb, var(--kol-surface-on-inverse) 1%, var(--kol-surface-inverse));
  --kol-oq-inverse-02: color-mix(in srgb, var(--kol-surface-on-inverse) 2%, var(--kol-surface-inverse));
  --kol-oq-inverse-04: color-mix(in srgb, var(--kol-surface-on-inverse) 4%, var(--kol-surface-inverse));
  --kol-oq-inverse-08: color-mix(in srgb, var(--kol-surface-on-inverse) 8%, var(--kol-surface-inverse));
  --kol-oq-inverse-12: color-mix(in srgb, var(--kol-surface-on-inverse) 12%, var(--kol-surface-inverse));
  --kol-oq-inverse-16: color-mix(in srgb, var(--kol-surface-on-inverse) 16%, var(--kol-surface-inverse));
  --kol-oq-inverse-24: color-mix(in srgb, var(--kol-surface-on-inverse) 24%, var(--kol-surface-inverse));
  --kol-oq-inverse-32: color-mix(in srgb, var(--kol-surface-on-inverse) 32%, var(--kol-surface-inverse));
  --kol-oq-inverse-40: color-mix(in srgb, var(--kol-surface-on-inverse) 40%, var(--kol-surface-inverse));
  --kol-oq-inverse-48: color-mix(in srgb, var(--kol-surface-on-inverse) 48%, var(--kol-surface-inverse));
  --kol-oq-inverse-64: color-mix(in srgb, var(--kol-surface-on-inverse) 64%, var(--kol-surface-inverse));
  --kol-oq-inverse-72: color-mix(in srgb, var(--kol-surface-on-inverse) 72%, var(--kol-surface-inverse));
  --kol-oq-inverse-80: color-mix(in srgb, var(--kol-surface-on-inverse) 80%, var(--kol-surface-inverse));
  --kol-oq-inverse-88: color-mix(in srgb, var(--kol-surface-on-inverse) 88%, var(--kol-surface-inverse));
  --kol-oq-inverse-96: color-mix(in srgb, var(--kol-surface-on-inverse) 96%, var(--kol-surface-inverse));
}

/* ==============================================================================
 * CLASSES — Background opacity (standard + inverse)
 * ============================================================================== */

.bg-oq-01 { background-color: var(--kol-oq-01); }
.bg-oq-02 { background-color: var(--kol-oq-02); }
.bg-oq-04 { background-color: var(--kol-oq-04); }
.bg-oq-08 { background-color: var(--kol-oq-08); }
.bg-oq-12 { background-color: var(--kol-oq-12); }
.bg-oq-16 { background-color: var(--kol-oq-16); }
.bg-oq-24 { background-color: var(--kol-oq-24); }
.bg-oq-32 { background-color: var(--kol-oq-32); }
.bg-oq-40 { background-color: var(--kol-oq-40); }
.bg-oq-48 { background-color: var(--kol-oq-48); }
.bg-oq-64 { background-color: var(--kol-oq-64); }
.bg-oq-72 { background-color: var(--kol-oq-72); }
.bg-oq-80 { background-color: var(--kol-oq-80); }
.bg-oq-88 { background-color: var(--kol-oq-88); }
.bg-oq-96 { background-color: var(--kol-oq-96); }

.bg-oq-inverse-01 { background-color: var(--kol-oq-inverse-01); }
.bg-oq-inverse-02 { background-color: var(--kol-oq-inverse-02); }
.bg-oq-inverse-04 { background-color: var(--kol-oq-inverse-04); }
.bg-oq-inverse-08 { background-color: var(--kol-oq-inverse-08); }
.bg-oq-inverse-12 { background-color: var(--kol-oq-inverse-12); }
.bg-oq-inverse-16 { background-color: var(--kol-oq-inverse-16); }
.bg-oq-inverse-24 { background-color: var(--kol-oq-inverse-24); }
.bg-oq-inverse-32 { background-color: var(--kol-oq-inverse-32); }
.bg-oq-inverse-40 { background-color: var(--kol-oq-inverse-40); }
.bg-oq-inverse-48 { background-color: var(--kol-oq-inverse-48); }
.bg-oq-inverse-64 { background-color: var(--kol-oq-inverse-64); }
.bg-oq-inverse-72 { background-color: var(--kol-oq-inverse-72); }
.bg-oq-inverse-80 { background-color: var(--kol-oq-inverse-80); }
.bg-oq-inverse-88 { background-color: var(--kol-oq-inverse-88); }
.bg-oq-inverse-96 { background-color: var(--kol-oq-inverse-96); }

/* ==============================================================================
 * CLASSES — Background hover (standard + inverse)
 * ============================================================================== */

.hover\:bg-oq-01:hover { background-color: var(--kol-oq-01); }
.hover\:bg-oq-02:hover { background-color: var(--kol-oq-02); }
.hover\:bg-oq-04:hover { background-color: var(--kol-oq-04); }
.hover\:bg-oq-08:hover { background-color: var(--kol-oq-08); }
.hover\:bg-oq-12:hover { background-color: var(--kol-oq-12); }
.hover\:bg-oq-16:hover { background-color: var(--kol-oq-16); }
.hover\:bg-oq-24:hover { background-color: var(--kol-oq-24); }
.hover\:bg-oq-32:hover { background-color: var(--kol-oq-32); }
.hover\:bg-oq-40:hover { background-color: var(--kol-oq-40); }
.hover\:bg-oq-48:hover { background-color: var(--kol-oq-48); }
.hover\:bg-oq-64:hover { background-color: var(--kol-oq-64); }
.hover\:bg-oq-72:hover { background-color: var(--kol-oq-72); }
.hover\:bg-oq-80:hover { background-color: var(--kol-oq-80); }
.hover\:bg-oq-88:hover { background-color: var(--kol-oq-88); }
.hover\:bg-oq-96:hover { background-color: var(--kol-oq-96); }

.hover\:bg-oq-inverse-01:hover { background-color: var(--kol-oq-inverse-01); }
.hover\:bg-oq-inverse-02:hover { background-color: var(--kol-oq-inverse-02); }
.hover\:bg-oq-inverse-04:hover { background-color: var(--kol-oq-inverse-04); }
.hover\:bg-oq-inverse-08:hover { background-color: var(--kol-oq-inverse-08); }
.hover\:bg-oq-inverse-12:hover { background-color: var(--kol-oq-inverse-12); }
.hover\:bg-oq-inverse-16:hover { background-color: var(--kol-oq-inverse-16); }
.hover\:bg-oq-inverse-24:hover { background-color: var(--kol-oq-inverse-24); }
.hover\:bg-oq-inverse-32:hover { background-color: var(--kol-oq-inverse-32); }
.hover\:bg-oq-inverse-40:hover { background-color: var(--kol-oq-inverse-40); }
.hover\:bg-oq-inverse-48:hover { background-color: var(--kol-oq-inverse-48); }
.hover\:bg-oq-inverse-64:hover { background-color: var(--kol-oq-inverse-64); }
.hover\:bg-oq-inverse-72:hover { background-color: var(--kol-oq-inverse-72); }
.hover\:bg-oq-inverse-80:hover { background-color: var(--kol-oq-inverse-80); }
.hover\:bg-oq-inverse-88:hover { background-color: var(--kol-oq-inverse-88); }
.hover\:bg-oq-inverse-96:hover { background-color: var(--kol-oq-inverse-96); }

/* ==============================================================================
 * CLASSES — Text opacity (standard + inverse)
 * ============================================================================== */

.text-oq-01 { color: var(--kol-oq-01); }
.text-oq-02 { color: var(--kol-oq-02); }
.text-oq-04 { color: var(--kol-oq-04); }
.text-oq-08 { color: var(--kol-oq-08); }
.text-oq-12 { color: var(--kol-oq-12); }
.text-oq-16 { color: var(--kol-oq-16); }
.text-oq-24 { color: var(--kol-oq-24); }
.text-oq-32 { color: var(--kol-oq-32); }
.text-oq-40 { color: var(--kol-oq-40); }
.text-oq-48 { color: var(--kol-oq-48); }
.text-oq-64 { color: var(--kol-oq-64); }
.text-oq-72 { color: var(--kol-oq-72); }
.text-oq-80 { color: var(--kol-oq-80); }
.text-oq-88 { color: var(--kol-oq-88); }
.text-oq-96 { color: var(--kol-oq-96); }

.text-oq-inverse-01 { color: var(--kol-oq-inverse-01); }
.text-oq-inverse-02 { color: var(--kol-oq-inverse-02); }
.text-oq-inverse-04 { color: var(--kol-oq-inverse-04); }
.text-oq-inverse-08 { color: var(--kol-oq-inverse-08); }
.text-oq-inverse-12 { color: var(--kol-oq-inverse-12); }
.text-oq-inverse-16 { color: var(--kol-oq-inverse-16); }
.text-oq-inverse-24 { color: var(--kol-oq-inverse-24); }
.text-oq-inverse-32 { color: var(--kol-oq-inverse-32); }
.text-oq-inverse-40 { color: var(--kol-oq-inverse-40); }
.text-oq-inverse-48 { color: var(--kol-oq-inverse-48); }
.text-oq-inverse-64 { color: var(--kol-oq-inverse-64); }
.text-oq-inverse-72 { color: var(--kol-oq-inverse-72); }
.text-oq-inverse-80 { color: var(--kol-oq-inverse-80); }
.text-oq-inverse-88 { color: var(--kol-oq-inverse-88); }
.text-oq-inverse-96 { color: var(--kol-oq-inverse-96); }

/* ==============================================================================
 * CLASSES — Border opacity (standard + inverse)
 * ============================================================================== */

.border-oq-01 { border-color: var(--kol-oq-01); }
.border-oq-02 { border-color: var(--kol-oq-02); }
.border-oq-04 { border-color: var(--kol-oq-04); }
.border-oq-08 { border-color: var(--kol-oq-08); }
.border-oq-12 { border-color: var(--kol-oq-12); }
.border-oq-16 { border-color: var(--kol-oq-16); }
.border-oq-24 { border-color: var(--kol-oq-24); }
.border-oq-32 { border-color: var(--kol-oq-32); }
.border-oq-40 { border-color: var(--kol-oq-40); }
.border-oq-48 { border-color: var(--kol-oq-48); }
.border-oq-64 { border-color: var(--kol-oq-64); }
.border-oq-72 { border-color: var(--kol-oq-72); }
.border-oq-80 { border-color: var(--kol-oq-80); }
.border-oq-88 { border-color: var(--kol-oq-88); }
.border-oq-96 { border-color: var(--kol-oq-96); }

.border-oq-inverse-01 { border-color: var(--kol-oq-inverse-01); }
.border-oq-inverse-02 { border-color: var(--kol-oq-inverse-02); }
.border-oq-inverse-04 { border-color: var(--kol-oq-inverse-04); }
.border-oq-inverse-08 { border-color: var(--kol-oq-inverse-08); }
.border-oq-inverse-12 { border-color: var(--kol-oq-inverse-12); }
.border-oq-inverse-16 { border-color: var(--kol-oq-inverse-16); }
.border-oq-inverse-24 { border-color: var(--kol-oq-inverse-24); }
.border-oq-inverse-32 { border-color: var(--kol-oq-inverse-32); }
.border-oq-inverse-40 { border-color: var(--kol-oq-inverse-40); }
.border-oq-inverse-48 { border-color: var(--kol-oq-inverse-48); }
.border-oq-inverse-64 { border-color: var(--kol-oq-inverse-64); }
.border-oq-inverse-72 { border-color: var(--kol-oq-inverse-72); }
.border-oq-inverse-80 { border-color: var(--kol-oq-inverse-80); }
.border-oq-inverse-88 { border-color: var(--kol-oq-inverse-88); }
.border-oq-inverse-96 { border-color: var(--kol-oq-inverse-96); }

/* ============================================================================
 * TOKENS — the `ab` tiers: PURE poles, and they FLIP (user ruling 2026-08-30)
 *
 * `ab` mixes the absolute ends of the range — #000000 / #ffffff — and which end
 * it starts from follows the THEME'S OWN SIDE, not the ink's:
 *
 *   light theme   ab-NN = white NN% into black  → ab-96 is 245, under a 250 page
 *   dark theme    ab-NN = black NN% into white  → ab-96 is  10, under an 18 page
 *
 * So `oq-ab-96` IS the well, in both themes, with no per-theme alias. That is
 * the whole reason this family exists: a percentage of the page mixed into the
 * page cannot darken it, so a well needs a pole outside the theme's range.
 *
 * NOTE THE DIRECTION. `fg-*` / `oq-*` flip toward the INK (light ink on dark).
 * `ab-*` flips toward the GROUND. `ab-inverse-*` is the opposite pole in each
 * theme, so it is the one that contrasts.
 *
 * These were frozen from 2026-08-28 until now — both ladders read the same
 * number in either theme, which is why `sunken` could not be expressed with
 * them and got patched with `oq-inverse-96` instead. `absolute-*` stays frozen;
 * that is its job, and it is a different family.
 * ============================================================================ */

/* LIGHT — the ground is white, so `ab` starts from white */
:root,
:is([data-theme="light"], .light) {
  --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
  --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
  --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, var(--kol-color-ab-black));
  --kol-oq-ab-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, var(--kol-color-ab-black));
  --kol-oq-ab-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, var(--kol-color-ab-black));
  --kol-oq-ab-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, var(--kol-color-ab-black));
  --kol-oq-ab-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, var(--kol-color-ab-black));
  --kol-oq-ab-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, var(--kol-color-ab-black));
  --kol-oq-ab-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, var(--kol-color-ab-black));
  --kol-oq-ab-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, var(--kol-color-ab-black));
  --kol-oq-ab-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, var(--kol-color-ab-black));
  --kol-oq-ab-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, var(--kol-color-ab-black));
  --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
  --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
  --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
  --kol-oq-ab-100: var(--kol-color-ab-white);

  --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
  --kol-oq-ab-inverse-100: var(--kol-color-ab-black);
}

/* DARK — the ground is black, so `ab` starts from black */
:is([data-theme="dark"], .dark) {
  --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
  --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
  --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
  --kol-oq-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, var(--kol-color-ab-white));
  --kol-oq-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, var(--kol-color-ab-white));
  --kol-oq-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, var(--kol-color-ab-white));
  --kol-oq-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, var(--kol-color-ab-white));
  --kol-oq-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, var(--kol-color-ab-white));
  --kol-oq-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, var(--kol-color-ab-white));
  --kol-oq-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, var(--kol-color-ab-white));
  --kol-oq-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, var(--kol-color-ab-white));
  --kol-oq-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, var(--kol-color-ab-white));
  --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
  --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
  --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
  --kol-oq-ab-100: var(--kol-color-ab-black);

  --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-100: var(--kol-color-ab-white);
}

/* system-follow: the block a user who never touched the toggle gets */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not(.light) {
      --kol-oq-ab-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
      --kol-oq-ab-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
      --kol-oq-ab-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, var(--kol-color-ab-white));
      --kol-oq-ab-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, var(--kol-color-ab-white));
      --kol-oq-ab-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, var(--kol-color-ab-white));
      --kol-oq-ab-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, var(--kol-color-ab-white));
      --kol-oq-ab-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, var(--kol-color-ab-white));
      --kol-oq-ab-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, var(--kol-color-ab-white));
      --kol-oq-ab-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, var(--kol-color-ab-white));
      --kol-oq-ab-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, var(--kol-color-ab-white));
      --kol-oq-ab-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, var(--kol-color-ab-white));
      --kol-oq-ab-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, var(--kol-color-ab-white));
      --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
      --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
      --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
  --kol-oq-ab-100: var(--kol-color-ab-black);
  
      --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-white) 4%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-white) 8%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-white) 12%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-white) 16%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-white) 24%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-white) 32%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-white) 40%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-white) 48%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-white) 64%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-white) 72%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
      --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
  --kol-oq-ab-inverse-100: var(--kol-color-ab-white);
  }
}
/* CLASSES — absolute tiers */
.bg-oq-ab-01 { background-color: var(--kol-oq-ab-01); }
.bg-oq-ab-02 { background-color: var(--kol-oq-ab-02); }
.bg-oq-ab-04 { background-color: var(--kol-oq-ab-04); }
.bg-oq-ab-08 { background-color: var(--kol-oq-ab-08); }
.bg-oq-ab-12 { background-color: var(--kol-oq-ab-12); }
.bg-oq-ab-16 { background-color: var(--kol-oq-ab-16); }
.bg-oq-ab-24 { background-color: var(--kol-oq-ab-24); }
.bg-oq-ab-32 { background-color: var(--kol-oq-ab-32); }
.bg-oq-ab-40 { background-color: var(--kol-oq-ab-40); }
.bg-oq-ab-48 { background-color: var(--kol-oq-ab-48); }
.bg-oq-ab-64 { background-color: var(--kol-oq-ab-64); }
.bg-oq-ab-72 { background-color: var(--kol-oq-ab-72); }
.bg-oq-ab-80 { background-color: var(--kol-oq-ab-80); }
.bg-oq-ab-88 { background-color: var(--kol-oq-ab-88); }
.bg-oq-ab-96 { background-color: var(--kol-oq-ab-96); }
.bg-oq-ab-100 { background-color: var(--kol-oq-ab-100); }

.bg-oq-ab-inverse-01 { background-color: var(--kol-oq-ab-inverse-01); }
.bg-oq-ab-inverse-02 { background-color: var(--kol-oq-ab-inverse-02); }
.bg-oq-ab-inverse-04 { background-color: var(--kol-oq-ab-inverse-04); }
.bg-oq-ab-inverse-08 { background-color: var(--kol-oq-ab-inverse-08); }
.bg-oq-ab-inverse-12 { background-color: var(--kol-oq-ab-inverse-12); }
.bg-oq-ab-inverse-16 { background-color: var(--kol-oq-ab-inverse-16); }
.bg-oq-ab-inverse-24 { background-color: var(--kol-oq-ab-inverse-24); }
.bg-oq-ab-inverse-32 { background-color: var(--kol-oq-ab-inverse-32); }
.bg-oq-ab-inverse-40 { background-color: var(--kol-oq-ab-inverse-40); }
.bg-oq-ab-inverse-48 { background-color: var(--kol-oq-ab-inverse-48); }
.bg-oq-ab-inverse-64 { background-color: var(--kol-oq-ab-inverse-64); }
.bg-oq-ab-inverse-72 { background-color: var(--kol-oq-ab-inverse-72); }
.bg-oq-ab-inverse-80 { background-color: var(--kol-oq-ab-inverse-80); }
.bg-oq-ab-inverse-88 { background-color: var(--kol-oq-ab-inverse-88); }
.bg-oq-ab-inverse-96 { background-color: var(--kol-oq-ab-inverse-96); }

.hover\:bg-oq-ab-01:hover { background-color: var(--kol-oq-ab-01); }
.hover\:bg-oq-ab-02:hover { background-color: var(--kol-oq-ab-02); }
.hover\:bg-oq-ab-04:hover { background-color: var(--kol-oq-ab-04); }
.hover\:bg-oq-ab-08:hover { background-color: var(--kol-oq-ab-08); }
.hover\:bg-oq-ab-12:hover { background-color: var(--kol-oq-ab-12); }
.hover\:bg-oq-ab-16:hover { background-color: var(--kol-oq-ab-16); }
.hover\:bg-oq-ab-24:hover { background-color: var(--kol-oq-ab-24); }
.hover\:bg-oq-ab-32:hover { background-color: var(--kol-oq-ab-32); }
.hover\:bg-oq-ab-40:hover { background-color: var(--kol-oq-ab-40); }
.hover\:bg-oq-ab-48:hover { background-color: var(--kol-oq-ab-48); }
.hover\:bg-oq-ab-64:hover { background-color: var(--kol-oq-ab-64); }
.hover\:bg-oq-ab-72:hover { background-color: var(--kol-oq-ab-72); }
.hover\:bg-oq-ab-80:hover { background-color: var(--kol-oq-ab-80); }
.hover\:bg-oq-ab-88:hover { background-color: var(--kol-oq-ab-88); }
.hover\:bg-oq-ab-96:hover { background-color: var(--kol-oq-ab-96); }

.hover\:bg-oq-ab-inverse-01:hover { background-color: var(--kol-oq-ab-inverse-01); }
.hover\:bg-oq-ab-inverse-02:hover { background-color: var(--kol-oq-ab-inverse-02); }
.hover\:bg-oq-ab-inverse-04:hover { background-color: var(--kol-oq-ab-inverse-04); }
.hover\:bg-oq-ab-inverse-08:hover { background-color: var(--kol-oq-ab-inverse-08); }
.hover\:bg-oq-ab-inverse-12:hover { background-color: var(--kol-oq-ab-inverse-12); }
.hover\:bg-oq-ab-inverse-16:hover { background-color: var(--kol-oq-ab-inverse-16); }
.hover\:bg-oq-ab-inverse-24:hover { background-color: var(--kol-oq-ab-inverse-24); }
.hover\:bg-oq-ab-inverse-32:hover { background-color: var(--kol-oq-ab-inverse-32); }
.hover\:bg-oq-ab-inverse-40:hover { background-color: var(--kol-oq-ab-inverse-40); }
.hover\:bg-oq-ab-inverse-48:hover { background-color: var(--kol-oq-ab-inverse-48); }
.hover\:bg-oq-ab-inverse-64:hover { background-color: var(--kol-oq-ab-inverse-64); }
.hover\:bg-oq-ab-inverse-72:hover { background-color: var(--kol-oq-ab-inverse-72); }
.hover\:bg-oq-ab-inverse-80:hover { background-color: var(--kol-oq-ab-inverse-80); }
.hover\:bg-oq-ab-inverse-88:hover { background-color: var(--kol-oq-ab-inverse-88); }
.hover\:bg-oq-ab-inverse-96:hover { background-color: var(--kol-oq-ab-inverse-96); }

.text-oq-ab-01 { color: var(--kol-oq-ab-01); }
.text-oq-ab-02 { color: var(--kol-oq-ab-02); }
.text-oq-ab-04 { color: var(--kol-oq-ab-04); }
.text-oq-ab-08 { color: var(--kol-oq-ab-08); }
.text-oq-ab-12 { color: var(--kol-oq-ab-12); }
.text-oq-ab-16 { color: var(--kol-oq-ab-16); }
.text-oq-ab-24 { color: var(--kol-oq-ab-24); }
.text-oq-ab-32 { color: var(--kol-oq-ab-32); }
.text-oq-ab-40 { color: var(--kol-oq-ab-40); }
.text-oq-ab-48 { color: var(--kol-oq-ab-48); }
.text-oq-ab-64 { color: var(--kol-oq-ab-64); }
.text-oq-ab-72 { color: var(--kol-oq-ab-72); }
.text-oq-ab-80 { color: var(--kol-oq-ab-80); }
.text-oq-ab-88 { color: var(--kol-oq-ab-88); }
.text-oq-ab-96 { color: var(--kol-oq-ab-96); }

.text-oq-ab-inverse-01 { color: var(--kol-oq-ab-inverse-01); }
.text-oq-ab-inverse-02 { color: var(--kol-oq-ab-inverse-02); }
.text-oq-ab-inverse-04 { color: var(--kol-oq-ab-inverse-04); }
.text-oq-ab-inverse-08 { color: var(--kol-oq-ab-inverse-08); }
.text-oq-ab-inverse-12 { color: var(--kol-oq-ab-inverse-12); }
.text-oq-ab-inverse-16 { color: var(--kol-oq-ab-inverse-16); }
.text-oq-ab-inverse-24 { color: var(--kol-oq-ab-inverse-24); }
.text-oq-ab-inverse-32 { color: var(--kol-oq-ab-inverse-32); }
.text-oq-ab-inverse-40 { color: var(--kol-oq-ab-inverse-40); }
.text-oq-ab-inverse-48 { color: var(--kol-oq-ab-inverse-48); }
.text-oq-ab-inverse-64 { color: var(--kol-oq-ab-inverse-64); }
.text-oq-ab-inverse-72 { color: var(--kol-oq-ab-inverse-72); }
.text-oq-ab-inverse-80 { color: var(--kol-oq-ab-inverse-80); }
.text-oq-ab-inverse-88 { color: var(--kol-oq-ab-inverse-88); }
.text-oq-ab-inverse-96 { color: var(--kol-oq-ab-inverse-96); }

.border-oq-ab-01 { border-color: var(--kol-oq-ab-01); }
.border-oq-ab-02 { border-color: var(--kol-oq-ab-02); }
.border-oq-ab-04 { border-color: var(--kol-oq-ab-04); }
.border-oq-ab-08 { border-color: var(--kol-oq-ab-08); }
.border-oq-ab-12 { border-color: var(--kol-oq-ab-12); }
.border-oq-ab-16 { border-color: var(--kol-oq-ab-16); }
.border-oq-ab-24 { border-color: var(--kol-oq-ab-24); }
.border-oq-ab-32 { border-color: var(--kol-oq-ab-32); }
.border-oq-ab-40 { border-color: var(--kol-oq-ab-40); }
.border-oq-ab-48 { border-color: var(--kol-oq-ab-48); }
.border-oq-ab-64 { border-color: var(--kol-oq-ab-64); }
.border-oq-ab-72 { border-color: var(--kol-oq-ab-72); }
.border-oq-ab-80 { border-color: var(--kol-oq-ab-80); }
.border-oq-ab-88 { border-color: var(--kol-oq-ab-88); }
.border-oq-ab-96 { border-color: var(--kol-oq-ab-96); }

.border-oq-ab-inverse-01 { border-color: var(--kol-oq-ab-inverse-01); }
.border-oq-ab-inverse-02 { border-color: var(--kol-oq-ab-inverse-02); }
.border-oq-ab-inverse-04 { border-color: var(--kol-oq-ab-inverse-04); }
.border-oq-ab-inverse-08 { border-color: var(--kol-oq-ab-inverse-08); }
.border-oq-ab-inverse-12 { border-color: var(--kol-oq-ab-inverse-12); }
.border-oq-ab-inverse-16 { border-color: var(--kol-oq-ab-inverse-16); }
.border-oq-ab-inverse-24 { border-color: var(--kol-oq-ab-inverse-24); }
.border-oq-ab-inverse-32 { border-color: var(--kol-oq-ab-inverse-32); }
.border-oq-ab-inverse-40 { border-color: var(--kol-oq-ab-inverse-40); }
.border-oq-ab-inverse-48 { border-color: var(--kol-oq-ab-inverse-48); }
.border-oq-ab-inverse-64 { border-color: var(--kol-oq-ab-inverse-64); }
.border-oq-ab-inverse-72 { border-color: var(--kol-oq-ab-inverse-72); }
.border-oq-ab-inverse-80 { border-color: var(--kol-oq-ab-inverse-80); }
.border-oq-ab-inverse-88 { border-color: var(--kol-oq-ab-inverse-88); }
.border-oq-ab-inverse-96 { border-color: var(--kol-oq-ab-inverse-96); }

/* ============================================================================
 * TOKENS — `absolute` opaque tiers (user ruling 2026-08-30)
 *
 * The `oq` half of the same split. `oq-ab-*` mixes the PURE poles (#000/#fff);
 * these mix the THEME'S OWN poles (#0e0e11 / #fcfbf8), frozen in both themes.
 *
 *   oq-absolute-NN          near-black NN% into near-white — a light ground darkening
 *   oq-absolute-inverse-NN  near-white NN% into near-black — a dark ground lightening
 *
 * Why both families exist: `ab` can step PAST the theme's ink, which is what a
 * well needs; `absolute` sits exactly on the theme's own two ends, which is
 * what chrome that must match a surface without following the theme needs.
 * Neither flips — the flipping pairs are `oq-*` / `oq-inverse-*`.
 * ============================================================================ */

:root {
  --kol-oq-absolute-01: color-mix(in srgb, var(--kol-color-black) 1%, var(--kol-color-white));
  --kol-oq-absolute-02: color-mix(in srgb, var(--kol-color-black) 2%, var(--kol-color-white));
  --kol-oq-absolute-04: color-mix(in srgb, var(--kol-color-black) 4%, var(--kol-color-white));
  --kol-oq-absolute-08: color-mix(in srgb, var(--kol-color-black) 8%, var(--kol-color-white));
  --kol-oq-absolute-12: color-mix(in srgb, var(--kol-color-black) 12%, var(--kol-color-white));
  --kol-oq-absolute-16: color-mix(in srgb, var(--kol-color-black) 16%, var(--kol-color-white));
  --kol-oq-absolute-24: color-mix(in srgb, var(--kol-color-black) 24%, var(--kol-color-white));
  --kol-oq-absolute-32: color-mix(in srgb, var(--kol-color-black) 32%, var(--kol-color-white));
  --kol-oq-absolute-40: color-mix(in srgb, var(--kol-color-black) 40%, var(--kol-color-white));
  --kol-oq-absolute-48: color-mix(in srgb, var(--kol-color-black) 48%, var(--kol-color-white));
  --kol-oq-absolute-64: color-mix(in srgb, var(--kol-color-black) 64%, var(--kol-color-white));
  --kol-oq-absolute-72: color-mix(in srgb, var(--kol-color-black) 72%, var(--kol-color-white));
  --kol-oq-absolute-80: color-mix(in srgb, var(--kol-color-black) 80%, var(--kol-color-white));
  --kol-oq-absolute-88: color-mix(in srgb, var(--kol-color-black) 88%, var(--kol-color-white));
  --kol-oq-absolute-96: color-mix(in srgb, var(--kol-color-black) 96%, var(--kol-color-white));

  --kol-oq-absolute-inverse-01: color-mix(in srgb, var(--kol-color-white) 1%, var(--kol-color-black));
  --kol-oq-absolute-inverse-02: color-mix(in srgb, var(--kol-color-white) 2%, var(--kol-color-black));
  --kol-oq-absolute-inverse-04: color-mix(in srgb, var(--kol-color-white) 4%, var(--kol-color-black));
  --kol-oq-absolute-inverse-08: color-mix(in srgb, var(--kol-color-white) 8%, var(--kol-color-black));
  --kol-oq-absolute-inverse-12: color-mix(in srgb, var(--kol-color-white) 12%, var(--kol-color-black));
  --kol-oq-absolute-inverse-16: color-mix(in srgb, var(--kol-color-white) 16%, var(--kol-color-black));
  --kol-oq-absolute-inverse-24: color-mix(in srgb, var(--kol-color-white) 24%, var(--kol-color-black));
  --kol-oq-absolute-inverse-32: color-mix(in srgb, var(--kol-color-white) 32%, var(--kol-color-black));
  --kol-oq-absolute-inverse-40: color-mix(in srgb, var(--kol-color-white) 40%, var(--kol-color-black));
  --kol-oq-absolute-inverse-48: color-mix(in srgb, var(--kol-color-white) 48%, var(--kol-color-black));
  --kol-oq-absolute-inverse-64: color-mix(in srgb, var(--kol-color-white) 64%, var(--kol-color-black));
  --kol-oq-absolute-inverse-72: color-mix(in srgb, var(--kol-color-white) 72%, var(--kol-color-black));
  --kol-oq-absolute-inverse-80: color-mix(in srgb, var(--kol-color-white) 80%, var(--kol-color-black));
  --kol-oq-absolute-inverse-88: color-mix(in srgb, var(--kol-color-white) 88%, var(--kol-color-black));
  --kol-oq-absolute-inverse-96: color-mix(in srgb, var(--kol-color-white) 96%, var(--kol-color-black));
}

/* CLASSES — absolute opaque tiers */
.bg-oq-absolute-01 { background-color: var(--kol-oq-absolute-01); }
.bg-oq-absolute-02 { background-color: var(--kol-oq-absolute-02); }
.bg-oq-absolute-04 { background-color: var(--kol-oq-absolute-04); }
.bg-oq-absolute-08 { background-color: var(--kol-oq-absolute-08); }
.bg-oq-absolute-12 { background-color: var(--kol-oq-absolute-12); }
.bg-oq-absolute-16 { background-color: var(--kol-oq-absolute-16); }
.bg-oq-absolute-24 { background-color: var(--kol-oq-absolute-24); }
.bg-oq-absolute-32 { background-color: var(--kol-oq-absolute-32); }
.bg-oq-absolute-40 { background-color: var(--kol-oq-absolute-40); }
.bg-oq-absolute-48 { background-color: var(--kol-oq-absolute-48); }
.bg-oq-absolute-64 { background-color: var(--kol-oq-absolute-64); }
.bg-oq-absolute-72 { background-color: var(--kol-oq-absolute-72); }
.bg-oq-absolute-80 { background-color: var(--kol-oq-absolute-80); }
.bg-oq-absolute-88 { background-color: var(--kol-oq-absolute-88); }
.bg-oq-absolute-96 { background-color: var(--kol-oq-absolute-96); }
.text-oq-absolute-01 { color: var(--kol-oq-absolute-01); }
.text-oq-absolute-02 { color: var(--kol-oq-absolute-02); }
.text-oq-absolute-04 { color: var(--kol-oq-absolute-04); }
.text-oq-absolute-08 { color: var(--kol-oq-absolute-08); }
.text-oq-absolute-12 { color: var(--kol-oq-absolute-12); }
.text-oq-absolute-16 { color: var(--kol-oq-absolute-16); }
.text-oq-absolute-24 { color: var(--kol-oq-absolute-24); }
.text-oq-absolute-32 { color: var(--kol-oq-absolute-32); }
.text-oq-absolute-40 { color: var(--kol-oq-absolute-40); }
.text-oq-absolute-48 { color: var(--kol-oq-absolute-48); }
.text-oq-absolute-64 { color: var(--kol-oq-absolute-64); }
.text-oq-absolute-72 { color: var(--kol-oq-absolute-72); }
.text-oq-absolute-80 { color: var(--kol-oq-absolute-80); }
.text-oq-absolute-88 { color: var(--kol-oq-absolute-88); }
.text-oq-absolute-96 { color: var(--kol-oq-absolute-96); }
.border-oq-absolute-01 { border-color: var(--kol-oq-absolute-01); }
.border-oq-absolute-02 { border-color: var(--kol-oq-absolute-02); }
.border-oq-absolute-04 { border-color: var(--kol-oq-absolute-04); }
.border-oq-absolute-08 { border-color: var(--kol-oq-absolute-08); }
.border-oq-absolute-12 { border-color: var(--kol-oq-absolute-12); }
.border-oq-absolute-16 { border-color: var(--kol-oq-absolute-16); }
.border-oq-absolute-24 { border-color: var(--kol-oq-absolute-24); }
.border-oq-absolute-32 { border-color: var(--kol-oq-absolute-32); }
.border-oq-absolute-40 { border-color: var(--kol-oq-absolute-40); }
.border-oq-absolute-48 { border-color: var(--kol-oq-absolute-48); }
.border-oq-absolute-64 { border-color: var(--kol-oq-absolute-64); }
.border-oq-absolute-72 { border-color: var(--kol-oq-absolute-72); }
.border-oq-absolute-80 { border-color: var(--kol-oq-absolute-80); }
.border-oq-absolute-88 { border-color: var(--kol-oq-absolute-88); }
.border-oq-absolute-96 { border-color: var(--kol-oq-absolute-96); }
.bg-oq-absolute-inverse-01 { background-color: var(--kol-oq-absolute-inverse-01); }
.bg-oq-absolute-inverse-02 { background-color: var(--kol-oq-absolute-inverse-02); }
.bg-oq-absolute-inverse-04 { background-color: var(--kol-oq-absolute-inverse-04); }
.bg-oq-absolute-inverse-08 { background-color: var(--kol-oq-absolute-inverse-08); }
.bg-oq-absolute-inverse-12 { background-color: var(--kol-oq-absolute-inverse-12); }
.bg-oq-absolute-inverse-16 { background-color: var(--kol-oq-absolute-inverse-16); }
.bg-oq-absolute-inverse-24 { background-color: var(--kol-oq-absolute-inverse-24); }
.bg-oq-absolute-inverse-32 { background-color: var(--kol-oq-absolute-inverse-32); }
.bg-oq-absolute-inverse-40 { background-color: var(--kol-oq-absolute-inverse-40); }
.bg-oq-absolute-inverse-48 { background-color: var(--kol-oq-absolute-inverse-48); }
.bg-oq-absolute-inverse-64 { background-color: var(--kol-oq-absolute-inverse-64); }
.bg-oq-absolute-inverse-72 { background-color: var(--kol-oq-absolute-inverse-72); }
.bg-oq-absolute-inverse-80 { background-color: var(--kol-oq-absolute-inverse-80); }
.bg-oq-absolute-inverse-88 { background-color: var(--kol-oq-absolute-inverse-88); }
.bg-oq-absolute-inverse-96 { background-color: var(--kol-oq-absolute-inverse-96); }
.text-oq-absolute-inverse-01 { color: var(--kol-oq-absolute-inverse-01); }
.text-oq-absolute-inverse-02 { color: var(--kol-oq-absolute-inverse-02); }
.text-oq-absolute-inverse-04 { color: var(--kol-oq-absolute-inverse-04); }
.text-oq-absolute-inverse-08 { color: var(--kol-oq-absolute-inverse-08); }
.text-oq-absolute-inverse-12 { color: var(--kol-oq-absolute-inverse-12); }
.text-oq-absolute-inverse-16 { color: var(--kol-oq-absolute-inverse-16); }
.text-oq-absolute-inverse-24 { color: var(--kol-oq-absolute-inverse-24); }
.text-oq-absolute-inverse-32 { color: var(--kol-oq-absolute-inverse-32); }
.text-oq-absolute-inverse-40 { color: var(--kol-oq-absolute-inverse-40); }
.text-oq-absolute-inverse-48 { color: var(--kol-oq-absolute-inverse-48); }
.text-oq-absolute-inverse-64 { color: var(--kol-oq-absolute-inverse-64); }
.text-oq-absolute-inverse-72 { color: var(--kol-oq-absolute-inverse-72); }
.text-oq-absolute-inverse-80 { color: var(--kol-oq-absolute-inverse-80); }
.text-oq-absolute-inverse-88 { color: var(--kol-oq-absolute-inverse-88); }
.text-oq-absolute-inverse-96 { color: var(--kol-oq-absolute-inverse-96); }
.border-oq-absolute-inverse-01 { border-color: var(--kol-oq-absolute-inverse-01); }
.border-oq-absolute-inverse-02 { border-color: var(--kol-oq-absolute-inverse-02); }
.border-oq-absolute-inverse-04 { border-color: var(--kol-oq-absolute-inverse-04); }
.border-oq-absolute-inverse-08 { border-color: var(--kol-oq-absolute-inverse-08); }
.border-oq-absolute-inverse-12 { border-color: var(--kol-oq-absolute-inverse-12); }
.border-oq-absolute-inverse-16 { border-color: var(--kol-oq-absolute-inverse-16); }
.border-oq-absolute-inverse-24 { border-color: var(--kol-oq-absolute-inverse-24); }
.border-oq-absolute-inverse-32 { border-color: var(--kol-oq-absolute-inverse-32); }
.border-oq-absolute-inverse-40 { border-color: var(--kol-oq-absolute-inverse-40); }
.border-oq-absolute-inverse-48 { border-color: var(--kol-oq-absolute-inverse-48); }
.border-oq-absolute-inverse-64 { border-color: var(--kol-oq-absolute-inverse-64); }
.border-oq-absolute-inverse-72 { border-color: var(--kol-oq-absolute-inverse-72); }
.border-oq-absolute-inverse-80 { border-color: var(--kol-oq-absolute-inverse-80); }
.border-oq-absolute-inverse-88 { border-color: var(--kol-oq-absolute-inverse-88); }
.border-oq-absolute-inverse-96 { border-color: var(--kol-oq-absolute-inverse-96); }