/**
 * Motyw bioacoustic.eu — kanonicznie noir (UI BLK usunięty; forest/blk = legacy CSS).
 */
:root,
[data-ba-theme="noir"] {
  --ba-header-h: 72px;
  --ba-text-scale: 1.22;
  --ba-bg: #0a0a0a;
  --ba-bg-mid: #1a1a1a;
  --ba-bg-deep: #121212;
  --ba-ink: #0a0a0a;
  --ba-gold: #f5cc54;
  --ba-on-dark: rgba(245, 245, 245, 0.9);
  --ba-on-dark-muted: rgba(200, 200, 200, 0.82);
  --ba-header-bg: color-mix(in srgb, #0a0a0a 72%, transparent);
  --ba-glass-bg: color-mix(in srgb, #121212 68%, transparent);
  --ba-glass-bg-mobile: color-mix(in srgb, #0a0a0a 78%, transparent);
  --ba-glass-border: color-mix(in srgb, #f5cc54 28%, transparent);
  --ba-rail-fade: rgba(0, 0, 0, 0.65);
  --ba-arrow-bg: color-mix(in srgb, #0a0a0a 65%, transparent);
  --ba-veil-a: rgba(0, 0, 0, 0.78);
  --ba-veil-b: rgba(10, 10, 10, 0.52);
  --ba-veil-c: rgba(20, 20, 20, 0.22);
  --ba-veil-d: rgba(0, 0, 0, 0.28);
  --ba-veil-e: rgba(0, 0, 0, 0.55);
  --ba-veil-patent-c: rgba(40, 40, 40, 0.35);
  --ba-veil-mobile: rgba(0, 0, 0, 0.8);
  --ba-page-glow: color-mix(in srgb, #f5cc54 22%, transparent);
  --ba-page-grad:
    radial-gradient(ellipse 70% 45% at 50% -8%, var(--ba-page-glow), transparent 58%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(40, 40, 40, 0.9), transparent 55%),
    linear-gradient(165deg, #0a0a0a 0%, #161616 48%, #101010 100%);
  --ba-wave-opacity: 0.55;
}

[data-ba-theme="forest"] {
  --ba-bg: #091a16;
  --ba-bg-mid: #205b4f;
  --ba-bg-deep: #163d36;
  --ba-ink: #0a0a0a;
  --ba-gold: #f5cc54;
  --ba-on-dark: rgba(255, 255, 255, 0.88);
  --ba-on-dark-muted: rgba(255, 255, 255, 0.78);
  --ba-header-bg: color-mix(in srgb, #091a16 55%, transparent);
  --ba-glass-bg: color-mix(in srgb, #091a16 62%, transparent);
  --ba-glass-bg-mobile: color-mix(in srgb, #091a16 72%, transparent);
  --ba-glass-border: color-mix(in srgb, #f5cc54 32%, transparent);
  --ba-rail-fade: rgba(9, 26, 22, 0.55);
  --ba-arrow-bg: color-mix(in srgb, #091a16 55%, transparent);
  --ba-veil-a: rgba(9, 26, 22, 0.82);
  --ba-veil-b: rgba(9, 26, 22, 0.55);
  --ba-veil-c: rgba(9, 26, 22, 0.28);
  --ba-veil-d: rgba(9, 26, 22, 0.22);
  --ba-veil-e: rgba(9, 26, 22, 0.48);
  --ba-veil-patent-c: rgba(32, 91, 79, 0.28);
  --ba-veil-mobile: rgba(9, 26, 22, 0.82);
  --ba-page-glow: color-mix(in srgb, #f5cc54 35%, transparent);
  --ba-page-grad:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--ba-page-glow), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in srgb, #163d36 80%, transparent), transparent 50%),
    linear-gradient(165deg, #091a16 0%, #205b4f 48%, #163d36 100%);
  --ba-wave-opacity: 0.55;
}

/* BLK — ton między Noir a pełną czernią; bez zieleni living lab. */
[data-ba-theme="blk"] {
  --ba-bg: #050505;
  --ba-bg-mid: #141414;
  --ba-bg-deep: #0c0c0c;
  --ba-ink: #050505;
  --ba-gold: #f5cc54;
  --ba-on-dark: rgba(247, 247, 247, 0.91);
  --ba-on-dark-muted: rgba(205, 205, 205, 0.83);
  --ba-header-bg: color-mix(in srgb, #000000 80%, transparent);
  --ba-glass-bg: color-mix(in srgb, #000000 76%, transparent);
  --ba-glass-bg-mobile: color-mix(in srgb, #000000 84%, transparent);
  --ba-glass-border: color-mix(in srgb, #f5cc54 29%, transparent);
  --ba-rail-fade: rgba(0, 0, 0, 0.74);
  --ba-arrow-bg: color-mix(in srgb, #000000 72%, transparent);
  --ba-veil-a: rgba(0, 0, 0, 0.84);
  --ba-veil-b: rgba(0, 0, 0, 0.62);
  --ba-veil-c: rgba(8, 8, 8, 0.3);
  --ba-veil-d: rgba(0, 0, 0, 0.36);
  --ba-veil-e: rgba(0, 0, 0, 0.64);
  --ba-veil-patent-c: rgba(16, 16, 16, 0.42);
  --ba-veil-mobile: rgba(0, 0, 0, 0.85);
  --ba-page-glow: color-mix(in srgb, #f5cc54 18%, transparent);
  --ba-page-grad:
    radial-gradient(ellipse 70% 45% at 50% -8%, var(--ba-page-glow), transparent 58%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(20, 20, 20, 0.92), transparent 55%),
    linear-gradient(165deg, #050505 0%, #0f0f0f 48%, #080808 100%);
  --ba-wave-opacity: 0.5;
}

/* Nadpisuje brand_dark_critical + pasieka-premium (zieleń) — jawne kolory, nie tylko var. */
body.pj-brand-dark[data-ba-theme="noir"],
html[data-ba-theme="noir"] body.pj-brand-dark {
  background-color: #0a0a0a !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -8%, color-mix(in srgb, #f5cc54 22%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(40, 40, 40, 0.9), transparent 55%),
    linear-gradient(165deg, #0a0a0a 0%, #161616 48%, #101010 100%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

body.pj-brand-dark[data-ba-theme="forest"],
html[data-ba-theme="forest"] body.pj-brand-dark {
  background-color: #091a16 !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, #f5cc54 35%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in srgb, #163d36 80%, transparent), transparent 50%),
    linear-gradient(165deg, #091a16 0%, #205b4f 48%, #163d36 100%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

body.pj-brand-dark[data-ba-theme="blk"],
html[data-ba-theme="blk"] body.pj-brand-dark {
  background-color: #050505 !important;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% -8%, color-mix(in srgb, #f5cc54 18%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 40% at 100% 100%, rgba(20, 20, 20, 0.92), transparent 55%),
    linear-gradient(165deg, #050505 0%, #0f0f0f 48%, #080808 100%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

body.pj-brand-dark[data-ba-theme="noir"] .pj-brand-card,
body.pj-brand-dark[data-ba-theme="noir"] .pj-soon__card {
  border-color: color-mix(in srgb, #f5cc54 28%, transparent);
  background: color-mix(in srgb, #121212 62%, transparent);
}

body.pj-brand-dark[data-ba-theme="blk"] .pj-brand-card,
body.pj-brand-dark[data-ba-theme="blk"] .pj-soon__card {
  border-color: color-mix(in srgb, #f5cc54 29%, transparent);
  background: color-mix(in srgb, #000000 72%, transparent);
}

body.pj-brand-dark[data-ba-theme="blk"] .ba-glass {
  background: color-mix(in srgb, #000000 76%, transparent);
}