/*
 * BuddyNext — Design Tokens
 *
 * The --bn-* CSS custom properties consumed by every BuddyNext component.
 * Split from bn-base.css so the token namespace can load independently:
 * the logged-in header user section (bn-header) only needs these tokens,
 * not the 130KB+ of component rules.
 */

/*
 * BuddyNext — Base CSS
 *
 * Defines all design system tokens (CSS custom properties) consumed by every
 * BuddyNext component. Must be loaded before any other bn-*.css handle.
 * Tokens match CLAUDE.md `:root` block verbatim.
 */

/* ── Stable scrollbar gutter (BuddyNext hub pages) ───────────────────────────
 * Hub pages scroll on the document. With no reserved gutter, switching between
 * tabs whose content differs in height (e.g. a long Feed vs a short About) makes
 * the viewport scrollbar appear/disappear on classic-scrollbar systems, shifting
 * the centred header + left rail by the scrollbar width on every tab change.
 * Reserving the gutter keeps the layout fixed across tab navigations. Scoped via
 * :has() to pages that render a BuddyNext hub so pure host-theme pages are left
 * untouched. */
html:has( .bn-app__main ) { scrollbar-gutter: stable; }

/* ── Design tokens ──────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────────────
 * v2 token system (canonical) — mirrors docs/v2 Plans/tokens.css.
 * Single `--bn-*` namespace, OKLCH-derived from one rotatable hue so
 * whitelabel rebrand only flips --bn-hue. Theme-agnostic: nothing leaks
 * into the host theme's global `--text-*` / `--bg` / `--brand` names —
 * legacy aliases at the bottom map old names onto the v2 source so any
 * pre-v2 CSS keeps rendering against the new palette.
 * ──────────────────────────────────────────────────────────────────────── */

:root,
[data-bn-theme="light"] {
	/* Brand hue — rotate per whitelabel; everything else derives from it. */
	--bn-hue:           var(--bn-accent-hue, 252);   /* 252 = indigo. 200 blue, 160 teal, 25 orange. */
	--bn-hue-jetonomy:  285;
	--bn-hue-media:     175;
	--bn-hue-events:    45;
	--bn-hue-paid:      145;

	/* Chroma (saturation depth). Lower = more neutral, higher = more vivid. */
	--bn-chroma: 0.16;

	/* Accent ramp */
	--bn-accent-50:  oklch(97% 0.02 var(--bn-hue));
	--bn-accent-100: oklch(94% 0.04 var(--bn-hue));
	--bn-accent-200: oklch(88% 0.07 var(--bn-hue));
	--bn-accent-300: oklch(80% 0.10 var(--bn-hue));
	--bn-accent-400: oklch(70% 0.13 var(--bn-hue));
	--bn-accent-500: oklch(58% var(--bn-chroma) var(--bn-hue));
	--bn-accent-600: oklch(50% var(--bn-chroma) var(--bn-hue));
	--bn-accent-700: oklch(42% calc(var(--bn-chroma) * 0.9) var(--bn-hue));
	--bn-accent-800: oklch(34% calc(var(--bn-chroma) * 0.85) var(--bn-hue));
	--bn-accent-900: oklch(26% calc(var(--bn-chroma) * 0.8) var(--bn-hue));
	--bn-accent:     var(--bn-accent-500);
	--bn-accent-fg:  oklch(99% 0 0);

	/* Surfaces (three-layer system) */
	--bn-canvas:   oklch(99% 0.002 var(--bn-hue));
	--bn-surface:  oklch(100% 0 0);
	--bn-raised:   oklch(99% 0.003 var(--bn-hue));
	--bn-sunken:   oklch(97% 0.004 var(--bn-hue));

	/* Borders */
	--bn-line:        oklch(92% 0.005 var(--bn-hue));
	--bn-line-strong: oklch(86% 0.008 var(--bn-hue));
	--bn-line-faint:  oklch(95% 0.003 var(--bn-hue));

	/* Text (AAA contrast) */
	--bn-ink:    oklch(20% 0.01 var(--bn-hue));
	--bn-ink-2:  oklch(40% 0.01 var(--bn-hue));
	--bn-ink-3:  oklch(58% 0.008 var(--bn-hue));
	--bn-ink-4:  oklch(72% 0.005 var(--bn-hue));

	/* Semantic */
	--bn-success:    oklch(55% 0.15 145);
	--bn-success-bg: oklch(96% 0.04 145);
	--bn-warn:       oklch(65% 0.16 75);
	--bn-warn-bg:    oklch(96% 0.05 75);
	--bn-danger:     oklch(58% 0.20 25);
	--bn-danger-bg:  oklch(96% 0.04 25);
	--bn-info:       oklch(58% 0.14 230);
	--bn-info-bg:    oklch(96% 0.04 230);

	/* Sibling-product accents (derived) */
	--bn-jetonomy:    oklch(58% var(--bn-chroma) var(--bn-hue-jetonomy));
	--bn-jetonomy-bg: oklch(96% 0.03 var(--bn-hue-jetonomy));
	--bn-media:       oklch(58% var(--bn-chroma) var(--bn-hue-media));
	--bn-media-bg:    oklch(96% 0.03 var(--bn-hue-media));
	--bn-events:      oklch(60% var(--bn-chroma) var(--bn-hue-events));
	--bn-events-bg:   oklch(96% 0.04 var(--bn-hue-events));
	--bn-paid:        oklch(55% var(--bn-chroma) var(--bn-hue-paid));
	--bn-paid-bg:     oklch(96% 0.03 var(--bn-hue-paid));

	/* Type families — adopt the host theme's font-family, fall back to BN's stack.
	 * font-scale.js publishes the active theme's resolved body/heading font as
	 * --bn-theme-font / --bn-theme-heading-font (the theme sets font-family with no
	 * CSS var, so we capture it in JS). BN keeps all its OWN sizing/weights/spacing
	 * — only the family is borrowed. When no theme/JS value exists, the Inter stack
	 * applies. The dyslexia block below re-sets --bn-font-ui/display directly, so
	 * Atkinson still overrides the theme font for accessibility. */
	--bn-font-ui:      var(--bn-theme-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
	--bn-font-display: var(--bn-theme-heading-font, var(--bn-theme-font, 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif));
	--bn-font-mono:    ui-monospace, SFMono-Regular, Menlo, 'Geist Mono', monospace;

	/* Type scale */
	--bn-text-scale: 1;
	--bn-text-2xs:  calc(11px * var(--bn-text-scale));
	--bn-text-xs:   calc(12px * var(--bn-text-scale));
	--bn-text-sm:   calc(13px * var(--bn-text-scale));
	--bn-text-base: calc(15px * var(--bn-text-scale));
	--bn-text-md:   calc(16px * var(--bn-text-scale));
	--bn-text-lg:   calc(18px * var(--bn-text-scale));
	--bn-text-xl:   calc(22px * var(--bn-text-scale));
	--bn-text-2xl:  calc(28px * var(--bn-text-scale));
	--bn-text-3xl:  calc(36px * var(--bn-text-scale));
	--bn-text-4xl:  calc(48px * var(--bn-text-scale));

	/* Spacing — 4px grid */
	--bn-density: 1;
	--bn-s1:  calc(4px  * var(--bn-density));
	--bn-s2:  calc(8px  * var(--bn-density));
	--bn-s3:  calc(12px * var(--bn-density));
	--bn-s4:  calc(16px * var(--bn-density));
	--bn-s5:  calc(20px * var(--bn-density));
	--bn-s6:  calc(24px * var(--bn-density));
	--bn-s8:  calc(32px * var(--bn-density));
	--bn-s10: calc(40px * var(--bn-density));
	--bn-s12: calc(48px * var(--bn-density));
	--bn-s16: calc(64px * var(--bn-density));

	/* Minimum touch-target edge for member-facing interactive controls.
	 * Nine rules across bn-feed.css / bn-spaces.css already read this token as
	 * `var(--bn-tap, 40px)` but it was never declared, so every one of them was
	 * silently living on its fallback. Declaring it here makes the floor real
	 * and gives one knob for the whole UI. Touch viewports raise it to 44px in
	 * the tap-target block near the end of this file. */
	--bn-tap: 40px;

	/* Radius — single source. Adopt the host theme's global corner radius
	   (BuddyX/BuddyX Pro/Reign expose --global-border-radius via the Customizer)
	   so BN cards/buttons match the site's chosen roundness; fall back to 10px
	   when the theme sets nothing. --bn-radius-scale still scales the whole set. */
	--bn-radius-base: calc(var(--global-border-radius, 10px) * var(--bn-radius-scale, 1));
	--bn-r-sm:   calc(var(--bn-radius-base) * 0.5);
	--bn-r-md:   var(--bn-radius-base);
	--bn-r-lg:   calc(var(--bn-radius-base) * 1.4);
	--bn-r-xl:   calc(var(--bn-radius-base) * 2);
	--bn-r-full: 9999px;

	/* Shadows */
	--bn-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.04);
	--bn-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04), 0 2px 4px oklch(0% 0 0 / 0.04);
	--bn-shadow-md: 0 2px 4px oklch(0% 0 0 / 0.04), 0 8px 16px oklch(0% 0 0 / 0.06);
	--bn-shadow-lg: 0 8px 16px oklch(0% 0 0 / 0.06), 0 24px 48px oklch(0% 0 0 / 0.08);
	--bn-ring:      0 0 0 3px oklch(58% var(--bn-chroma) var(--bn-hue) / 0.18);

	/* Scrim/backdrop behind modals and overlays. Mode-aware: a plain dark
		rgba scrim is nearly invisible over an already-dark page, so the dark
		block below raises the opacity. */
	--bn-overlay: oklch(0% 0 0 / 0.45);

	/* Motion */
	--bn-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
	--bn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--bn-dur-fast: 120ms;
	--bn-dur:      200ms;
	--bn-dur-slow: 400ms;

	/* Layout */
	/* --bn-topbar-h is 0 because the BN-owned topbar was removed; the active
	 * theme's get_header() is now the only top navigation. The token remains
	 * so existing calc() expressions in feature stylesheets keep working. */
	--bn-topbar-h:     0px;
	--bn-railw:        260px;
	--bn-content-max:  720px;
	--bn-content-wide: 1080px;

	/* Avatar presence-dot border — defaults to surface so dots read on cards,
	 * locally overridable on sunken / raised containers. */
	--bn-avatar-presence-border: var(--bn-surface);

	/* Font weight */
	--bn-fw-normal:          400;
	--bn-fw-medium:          500;
	--bn-fw-medium-semibold: 550; /* Inter variable-font weight between medium and semibold. */
	--bn-fw-semibold:        600;
	--bn-fw-bold:            700;
	--bn-fw-extrabold:       800;

	/* Letter spacing */
	--bn-ls-tight:  -0.02em;
	--bn-ls-normal: 0em;
	--bn-ls-wide:   0.03em;
	--bn-ls-wider:  0.06em;

	/* Leading */
	--bn-leading-tight:  1.25;
	--bn-leading-snug:   1.35;
	--bn-leading-normal: 1.5;
	--bn-leading-body:   1.7;

	/* ── Legacy aliases — pre-v2 names that already ship in 16 CSS files.
	 *    Mapped onto the v2 source so old class rules keep rendering
	 *    against the new palette. Do NOT add new consumers of these names;
	 *    new code uses --bn-* directly.
	 * ──────────────────────────────────────────────────────────────────── */

	/* Typography */
	--font-body:    var(--bn-font-ui);
	--font-display: var(--bn-font-display);
	--text-xs:      var(--bn-text-xs);
	--text-sm:      var(--bn-text-sm);
	--text-base:    var(--bn-text-base);
	--text-lg:      var(--bn-text-lg);
	--text-xl:      var(--bn-text-xl);
	--text-2xl:     var(--bn-text-2xl);
	--text-3xl:     var(--bn-text-3xl);
	--text-4xl:     var(--bn-text-4xl);
	--leading-tight:  var(--bn-leading-tight);
	--leading-snug:   var(--bn-leading-snug);
	--leading-normal: var(--bn-leading-normal);
	--leading-body:   var(--bn-leading-body);

	/* Font weight */
	--fw-normal:    var(--bn-fw-normal);
	--fw-medium:    var(--bn-fw-medium);
	--fw-semibold:  var(--bn-fw-semibold);
	--fw-bold:      var(--bn-fw-bold);
	--fw-extrabold: var(--bn-fw-extrabold);

	/* Letter spacing */
	--ls-tight:  var(--bn-ls-tight);
	--ls-normal: var(--bn-ls-normal);
	--ls-wide:   var(--bn-ls-wide);
	--ls-wider:  var(--bn-ls-wider);

	/* Surfaces */
	--bg:          var(--bn-canvas);
	--bg-subtle:   var(--bn-sunken);
	--bg-hover:    var(--bn-sunken);
	--surface:     var(--bn-surface);
	--border:      var(--bn-line);
	--border-soft: var(--bn-line-faint);
	--text-1:      var(--bn-ink);
	--text-2:      var(--bn-ink-2);
	--text-3:      var(--bn-ink-3);

	/* Brand */
	--brand:       var(--bn-accent);
	--brand-light: var(--bn-accent-100);
	--brand-hover: var(--bn-accent-700);

	/* Integration accents */
	--jetonomy:        var(--bn-jetonomy);
	--jetonomy-bg:     var(--bn-jetonomy-bg);
	--jetonomy-border: var(--bn-jetonomy-bg);
	--mvs:             var(--bn-media);
	--mvs-bg:          var(--bn-media-bg);
	--mvs-border:      var(--bn-media-bg);

	/* Neutral */
	--white:          oklch(100% 0 0);
	--text-on-brand:  var(--bn-accent-fg);

	/* Semantic */
	--green:       var(--bn-success);
	--green-bg:    var(--bn-success-bg);
	--amber:       var(--bn-warn);
	--amber-bg:    var(--bn-warn-bg);
	--red:         var(--bn-danger);
	--red-bg:      var(--bn-danger-bg);
	--pink:        oklch(60% 0.20 350);

	/* Auth-page gradient stops */
	--auth-grad-from: var(--bn-accent);
	--auth-grad-via:  oklch(50% 0.20 270);
	--auth-grad-to:   oklch(52% 0.22 295);

	/* Spacing */
	--s1:  var(--bn-s1);
	--s2:  var(--bn-s2);
	--s3:  var(--bn-s3);
	--s4:  var(--bn-s4);
	--s5:  var(--bn-s5);
	--s6:  var(--bn-s6);
	--s8:  var(--bn-s8);
	--s10: var(--bn-s10);
	--s12: var(--bn-s12);

	/* Radius */
	--r-sm:   var(--bn-r-sm);
	--r-md:   var(--bn-r-md);
	--r-lg:   var(--bn-r-lg);
	--r-xl:   var(--bn-r-xl);
	--r-full: var(--bn-r-full);

	/* Shadows */
	--shadow-sm: var(--bn-shadow-sm);
	--shadow-md: var(--bn-shadow-md);

	/* Transition */
	--transition: var(--bn-dur) var(--bn-ease);

	/* Legacy --bn-* names not yet covered above (a few CSS files use these). */
	--bn-bg:           var(--bn-canvas);
	--bn-bg-subtle:    var(--bn-sunken);
	--bn-bg-hover:     var(--bn-sunken);
	--bn-border:       var(--bn-line);
	--bn-border-soft:  var(--bn-line-faint);
	--bn-text-1:       var(--bn-ink);
	--bn-text-2:       var(--bn-ink-2);
	--bn-text-3:       var(--bn-ink-3);
	--bn-font-body:    var(--bn-font-ui);
	--bn-brand:        var(--bn-accent);
	--bn-brand-light:  var(--bn-accent-100);
	--bn-brand-hover:  var(--bn-accent-700);
	--bn-red:          var(--bn-danger);
	--bn-red-bg:       var(--bn-danger-bg);
	--bn-amber:        var(--bn-warn);
	--bn-amber-bg:     var(--bn-warn-bg);
	--bn-transition:   var(--bn-dur) var(--bn-ease);
}

/* ── Density modes ────────────────────────────────────────────────────── */
[data-bn-density="compact"] {
	--bn-density: 0.8;
	--bn-text-scale: 0.93;
	--bn-radius-scale: 0.8;   /* multiplicative — keeps the calc() invariant */
}

/* ── Large-text accessibility ─────────────────────────────────────────── */
[data-bn-text="large"]  { --bn-text-scale: 1.15; }
[data-bn-text="xlarge"] { --bn-text-scale: 1.3; }

/* ── Dyslexia-friendly font swap (opt-in).
 * Falls through to Inter until Atkinson Hyperlegible is self-hosted. */
[data-bn-dyslexia="on"] {
	--bn-font-ui:      'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif;
	--bn-font-display: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif;
}

/* ── Dark mode ──
 * Triggered by [data-bn-theme="dark"] (v2 canonical), the legacy
 * [data-theme="dark"] (existing templates), or [data-bx-mode="dark"] — the
 * attribute the Wbcom sibling themes (BuddyX, BuddyX Pro, Reign) set on <html>
 * via their color-mode toggle. Mapping the theme toggle into BN's token system
 * keeps every BN surface (blocks, header chrome, dropdowns) dark when the host
 * theme is dark, so the suite stays visually consistent.
 * ──────────────────────────────────────────────────────────────────── */
[data-bn-theme="dark"],
[data-theme="dark"],
[data-bx-mode="dark"] {
	/* Tell the UA to render native controls (date/time picker popups, <select>
	   dropdowns, scrollbars, spinners) in their dark variant. Without this a
	   native <input type="date"> calendar opens light-on-light over a dark page. */
	color-scheme: dark;
	--bn-canvas:   oklch(15% 0.008 var(--bn-hue));
	--bn-surface:  oklch(19% 0.01  var(--bn-hue));
	--bn-raised:   oklch(22% 0.012 var(--bn-hue));
	--bn-sunken:   oklch(13% 0.006 var(--bn-hue));

	--bn-line:        oklch(28% 0.012 var(--bn-hue));
	--bn-line-strong: oklch(36% 0.014 var(--bn-hue));
	--bn-line-faint:  oklch(24% 0.01  var(--bn-hue));

	--bn-ink:    oklch(96% 0.005 var(--bn-hue));
	--bn-ink-2:  oklch(78% 0.008 var(--bn-hue));
	--bn-ink-3:  oklch(60% 0.008 var(--bn-hue));
	--bn-ink-4:  oklch(45% 0.008 var(--bn-hue));

	--bn-accent-500: oklch(72% var(--bn-chroma) var(--bn-hue));
	--bn-accent-600: oklch(78% var(--bn-chroma) var(--bn-hue));
	--bn-accent-700: oklch(85% calc(var(--bn-chroma) * 0.9) var(--bn-hue));
	--bn-accent-800: oklch(90% calc(var(--bn-chroma) * 0.85) var(--bn-hue));
	--bn-accent-900: oklch(95% calc(var(--bn-chroma) * 0.8) var(--bn-hue));
	--bn-accent-100: oklch(28% 0.05 var(--bn-hue));
	--bn-accent-200: oklch(35% 0.08 var(--bn-hue));
	--bn-accent-300: oklch(42% 0.10 var(--bn-hue));
	--bn-accent-50:  oklch(22% 0.03 var(--bn-hue));
	--bn-accent:     var(--bn-accent-500);
	--bn-accent-fg:  oklch(15% 0.008 var(--bn-hue));

	--bn-success-bg: oklch(25% 0.05 145);
	--bn-warn-bg:    oklch(25% 0.05 75);
	--bn-danger-bg:  oklch(25% 0.06 25);
	--bn-info-bg:    oklch(25% 0.05 230);

	--bn-jetonomy-bg: oklch(25% 0.04 var(--bn-hue-jetonomy));
	--bn-media-bg:    oklch(25% 0.04 var(--bn-hue-media));
	--bn-events-bg:   oklch(25% 0.04 var(--bn-hue-events));
	--bn-paid-bg:     oklch(25% 0.04 var(--bn-hue-paid));

	--bn-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.4);
	--bn-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4), 0 2px 4px oklch(0% 0 0 / 0.3);
	--bn-shadow-md: 0 2px 4px oklch(0% 0 0 / 0.3), 0 8px 16px oklch(0% 0 0 / 0.4);
	--bn-shadow-lg: 0 8px 16px oklch(0% 0 0 / 0.4), 0 24px 48px oklch(0% 0 0 / 0.5);
	--bn-ring:      0 0 0 3px oklch(72% var(--bn-chroma) var(--bn-hue) / 0.3);

	/* Heavier scrim so the modal/backdrop separation stays visible on a dark page. */
	--bn-overlay: oklch(0% 0 0 / 0.66);
}

/* Auto from system preference */
@media (prefers-color-scheme: dark) {
	[data-bn-theme="auto"] {
		--bn-canvas:   oklch(15% 0.008 var(--bn-hue));
		--bn-surface:  oklch(19% 0.01  var(--bn-hue));
		--bn-raised:   oklch(22% 0.012 var(--bn-hue));
		--bn-sunken:   oklch(13% 0.006 var(--bn-hue));
		--bn-line:        oklch(28% 0.012 var(--bn-hue));
		--bn-line-strong: oklch(36% 0.014 var(--bn-hue));
		--bn-line-faint:  oklch(24% 0.01  var(--bn-hue));
		--bn-ink:   oklch(96% 0.005 var(--bn-hue));
		--bn-ink-2: oklch(78% 0.008 var(--bn-hue));
		--bn-ink-3: oklch(60% 0.008 var(--bn-hue));
		--bn-ink-4: oklch(45% 0.008 var(--bn-hue));
		--bn-accent-500: oklch(72% var(--bn-chroma) var(--bn-hue));
		--bn-accent-100: oklch(28% 0.05 var(--bn-hue));
		--bn-accent:     var(--bn-accent-500);
		--bn-accent-fg:  oklch(15% 0.008 var(--bn-hue));
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	:root { --bn-dur-fast: 0ms; --bn-dur: 0ms; --bn-dur-slow: 0ms; }
}

/* ────────────────────────────────────────────────────────────────────────
 * Browser-support fallback — OKLCH + color-mix()
 *
 * Chrome 111+ / Safari 16.4+ / Firefox 113+ parse oklch() and color-mix().
 * On older builds the var() values would be invalid and components would
 * fall back to inherit (often black on white). This block republishes the
 * top ~20 tokens as hex/rgb so the namespace stays usable when the modern
 * color syntax isn't supported. v2 indigo hue snapshot only — whitelabel
 * rebrand requires modern browsers regardless.
 * ────────────────────────────────────────────────────────────────────── */

@supports not (color: oklch(0% 0 0)) {
	:root,
	[data-bn-theme="light"] {
		--bn-accent-50:  #eef0fc;
		--bn-accent-100: #dfe3f9;
		--bn-accent-200: #c4cbf2;
		--bn-accent-300: #a4adea;
		--bn-accent-400: #7a86dd;
		--bn-accent-500: #5b67d0;
		--bn-accent-600: #4754ad;
		--bn-accent-700: #36418b;
		--bn-accent-800: #28316a;
		--bn-accent-900: #1c234c;
		--bn-accent:     #5b67d0;
		--bn-accent-fg:  #ffffff;

		--bn-canvas:  #fbfbfd;
		--bn-surface: #ffffff;
		--bn-raised:  #fbfbfd;
		--bn-sunken:  #f4f4f8;

		--bn-line:        #e6e6ee;
		--bn-line-strong: #d4d4de;
		--bn-line-faint:  #efeff5;

		--bn-ink:   #1f2030;
		--bn-ink-2: #4d4f60;
		--bn-ink-3: #7a7c8c;
		--bn-ink-4: #aaabb8;

		--bn-success:    #2fa66f;
		--bn-success-bg: #e8f7ee;
		--bn-warn:       #c98a1f;
		--bn-warn-bg:    #fbf2da;
		--bn-danger:     #d24a3e;
		--bn-danger-bg:  #fbe8e5;
		--bn-info:       #2978c9;
		--bn-info-bg:    #e3effa;

		--bn-jetonomy:    #a063e0;
		--bn-jetonomy-bg: #f3e8fb;
		--bn-media:       #1da18f;
		--bn-media-bg:    #e0f6f1;
		--bn-events:      #d08a1f;
		--bn-events-bg:   #fbf0d6;
		--bn-paid:        #1f9a5e;
		--bn-paid-bg:     #e0f3e8;

		--bn-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
		--bn-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
		--bn-shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.06);
		--bn-shadow-lg: 0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.08);
		--bn-ring:      0 0 0 3px rgba(91,103,208,0.18);
	}

	[data-bn-theme="dark"],
	[data-theme="dark"],
	[data-bx-mode="dark"] {
		--bn-canvas:  #15161f;
		--bn-surface: #1c1d2a;
		--bn-raised:  #20212f;
		--bn-sunken:  #11121a;

		--bn-line:        #2b2c3a;
		--bn-line-strong: #3a3c4d;
		--bn-line-faint:  #23242f;

		--bn-ink:   #ebebf2;
		--bn-ink-2: #c2c2cf;
		--bn-ink-3: #8c8d9c;
		--bn-ink-4: #5e6071;

		--bn-accent-500: #8d96e0;
		--bn-accent-600: #a0a8e7;
		--bn-accent-700: #b9bfed;
		--bn-accent-100: #313759;
		--bn-accent-200: #404670;
		--bn-accent-50:  #1f243b;
		--bn-accent:     #8d96e0;
		--bn-accent-fg:  #15161f;

		--bn-success-bg: #1a3a2a;
		--bn-warn-bg:    #3a2e1a;
		--bn-danger-bg:  #3a1f1a;
		--bn-info-bg:    #1a2a3a;

		--bn-jetonomy-bg: #2e1f3a;
		--bn-media-bg:    #1a3a35;
		--bn-events-bg:   #3a2a1a;
		--bn-paid-bg:     #1a3a2a;

		--bn-ring: 0 0 0 3px rgba(141,150,224,0.32);
	}

	/* Buttons + badges using color-mix gradients fall back to flat colour. */
	.bn-btn[data-variant="ai"] {
		background: linear-gradient(135deg, var(--bn-accent), var(--bn-jetonomy));
	}
}

/* ────────────────────────────────────────────────────────────────────────
 * Higher-contrast preference (Windows High Contrast, macOS Increase Contrast)
 * ────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
	:root,
	[data-bn-theme="light"] {
		--bn-line:        oklch(50% 0 0);
		--bn-line-strong: oklch(35% 0 0);
		--bn-line-faint:  oklch(60% 0 0);
		--bn-ink-3:       oklch(30% 0 0);
		--bn-ink-4:       oklch(40% 0 0);
		--bn-ring:        0 0 0 3px oklch(20% 0 0);
	}
	[data-bn-theme="dark"],
	[data-theme="dark"],
	[data-bx-mode="dark"] {
		--bn-line:        oklch(70% 0 0);
		--bn-line-strong: oklch(85% 0 0);
		--bn-line-faint:  oklch(60% 0 0);
		--bn-ink-3:       oklch(85% 0 0);
		--bn-ink-4:       oklch(75% 0 0);
		--bn-ring:        0 0 0 3px oklch(95% 0 0);
	}
}

/* ────────────────────────────────────────────────────────────────────────
 * Forced colors (Windows High Contrast Mode + reader-mode forced palettes)
 *
 * Let the OS palette through on interactive primitives so focus, links, and
 * danger semantics remain visible. Decorative backgrounds and shadows are
 * removed by the browser automatically in this mode.
 * ────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
	.bn-btn,
	.bn-btn[data-variant],
	.bn-input,
	.bn-textarea,
	.bn-select,
	.bn-badge,
	.bn-card,
	.bn-card[data-interactive],
	.bn-toast,
	.bn-modal__panel {
		forced-color-adjust: auto;
		border-color: CanvasText;
	}
	.bn-btn[data-variant="primary"],
	.bn-btn[data-variant="danger"] {
		background: ButtonText;
		color: ButtonFace;
	}
	:focus-visible,
	.bn-btn:focus-visible,
	.bn-input:focus-visible,
	.bn-textarea:focus-visible,
	.bn-select:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}