:root {
  --lb-bg-light-rgb: 247, 250, 255;
  --lb-bg-light-soft-rgb: 230, 236, 247;
  --lb-bg-dark-rgb: 5, 7, 18;
  --lb-bg-dark-soft-rgb: 11, 16, 32;
  --lb-text-light-main-rgb: 16, 19, 34;
  --lb-text-light-muted-rgb: 91, 100, 122;
  --lb-text-dark-main-rgb: 247, 249, 255;
  --lb-text-dark-muted-rgb: 168, 176, 200;
  --lb-border-soft-rgb: 148, 163, 184;
  --lb-border-strong-rgb: 51, 65, 85;
  --lb-border-soft-light-rgb: 226, 232, 240;
  --lb-border-soft-lighter-rgb: 248, 250, 252;
  --lb-shadow-color-rgb: 0, 0, 0;
  --lb-accent-main-rgb: 124, 47, 227;
  --lb-accent-strong-rgb: 105.4, 39.95, 192.95;
  --lb-accent-support-rgb: 108.4, 91.85, 169.8;
  --lb-accent-soft-light-rgb: 222.4, 209.4, 249.4;
  --lb-accent-soft-dark-rgb: 28.8, 15, 59.8;
  --lb-accent-subtle-light-rgb: 234.7, 229.7, 252.2;
  --lb-accent-subtle-dark-rgb: 16.9, 11, 38.9;
  --lb-accent-outline-light-rgb: 49.6, 18.8, 90.8;
  --lb-accent-outline-dark-rgb: 202.6, 171.8, 243.8;
  --lb-accent-on-accent-rgb: 255, 255, 255;
  --lb-bg-grain-strength: 0.6;
  --color-primary-50: 244.52, 238.36, 252.76;
  --color-primary-100: 235.35, 223.8, 250.8;
  --color-primary-200: 222.25, 203, 248;
  --color-primary-300: 202.6, 171.8, 243.8;
  --color-primary-400: 182.95, 140.6, 239.6;
  --color-primary-500: 124, 47, 227;
  --color-primary-600: 18.6, 7.05, 34.05;
  --color-primary-700: 37.2, 14.1, 68.1;
  --color-primary-800: 55.8, 21.15, 102.15;
  --color-primary-900: 74.4, 28.2, 136.2;
  --lb-surface-bg-rgb: var(--lb-bg-light-rgb);
  --lb-surface-bg-soft-rgb: var(--lb-bg-light-soft-rgb);
  --lb-surface-text-main-rgb: var(--lb-text-light-main-rgb);
  --lb-surface-text-muted-rgb: var(--lb-text-light-muted-rgb);
  --lb-accent-soft-bg-rgb: var(--lb-accent-soft-light-rgb);
  --lb-accent-subtle-bg-rgb: var(--lb-accent-subtle-light-rgb);
  --lb-accent-outline-rgb: var(--lb-accent-outline-light-rgb);
}

html.dark,
body.dark,
html[data-theme=dark] {
  --lb-surface-bg-rgb: var(--lb-bg-dark-rgb);
  --lb-surface-bg-soft-rgb: var(--lb-bg-dark-soft-rgb);
  --lb-surface-text-main-rgb: var(--lb-text-dark-main-rgb);
  --lb-surface-text-muted-rgb: var(--lb-text-dark-muted-rgb);
  --lb-accent-soft-bg-rgb: var(--lb-accent-soft-dark-rgb);
  --lb-accent-subtle-bg-rgb: var(--lb-accent-subtle-dark-rgb);
  --lb-accent-outline-rgb: var(--lb-accent-outline-dark-rgb);
}

body {
  background: radial-gradient(circle at var(--lb-bg-center-x, 20%) var(--lb-bg-center-y, 18%), rgba(var(--lb-accent-soft-bg-rgb), 1) 0%, rgba(var(--lb-accent-soft-bg-rgb), 0) 40%), radial-gradient(circle at var(--lb-bg-center2-x, 80%) var(--lb-bg-center2-y, 0%), rgba(var(--lb-accent-subtle-bg-rgb), 1) 0%, rgba(var(--lb-accent-subtle-bg-rgb), 0) 40%), rgb(var(--lb-surface-bg-rgb));
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% calc(var(--lb-bg-parallax-y, 0px)), 50% calc(var(--lb-bg-parallax-y, 0px)), 50% 0;
  color: rgb(var(--lb-surface-text-main-rgb));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'%2F%3E%3C/filter%3E%3Crect width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.08'%2F%3E%3C/svg%3E);
  background-repeat: repeat;
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: var(--lb-bg-grain-strength, 0.22);
}

:root {
  /* Bridge Ferrex tokens into the shared lowband palette. */
  --ferrex-primary-rgb: var(--lb-accent-main-rgb);
  --ferrex-primary-strong-rgb: var(--lb-accent-strong-rgb);
  --ferrex-support-rgb: var(--lb-accent-support-rgb);
  /* Ferrex-specific accent hues derived from the shared palette. */
  --ferrex-cyan-rgb: 100.4, 117.8, 233.8;
  --ferrex-amber-rgb: 172.8, 101.4, 170.6;
  --ferrex-cyan: rgb(var(--ferrex-cyan-rgb));
  --ferrex-amber: rgb(var(--ferrex-amber-rgb));
  /* CTA strip gradient colors (cyan/amber for Ferrex) */
  --lb-cta-gradient-start-rgb: var(--ferrex-cyan-rgb);
  --lb-cta-gradient-end-rgb: var(--ferrex-amber-rgb);
  /* Surface colors track the current appearance (light/dark). */
  --ferrex-obsidian: rgb(var(--lb-surface-bg-rgb));
  --ferrex-card: rgba(var(--lb-surface-bg-soft-rgb), 0.92);
  --ferrex-border: rgba(var(--lb-surface-text-main-rgb), 0.08);
  --ferrex-gradient: linear-gradient(
    120deg,
    rgba(var(--lb-accent-soft-bg-rgb), 0.5),
    rgba(var(--lb-accent-subtle-bg-rgb), 0.9)
  );
  --ferrex-radius-md: 0.30rem;
  --ferrex-radius-sm: 0.15rem;
  --ferrex-shadow-soft: 0 20px 60px rgba(var(--lb-shadow-color-rgb), 0.6);
}