: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: 13, 92, 115;
  --lb-accent-strong-rgb: 11.05, 78.2, 97.75;
  --lb-accent-support-rgb: 69.55, 107.6, 130.6;
  --lb-accent-soft-light-rgb: 200.2, 218.4, 227;
  --lb-accent-soft-dark-rgb: 6.6, 24, 37.4;
  --lb-accent-subtle-light-rgb: 223.6, 234.2, 241;
  --lb-accent-subtle-dark-rgb: 5.8, 15.5, 27.7;
  --lb-accent-outline-light-rgb: 5.2, 36.8, 46;
  --lb-accent-outline-dark-rgb: 158.2, 189.8, 199;
  --lb-accent-on-accent-rgb: 255, 255, 255;
  --lb-bg-grain-strength: 0.6;
  --color-primary-50: 235.64, 241.96, 243.8;
  --color-primary-100: 218.7, 230.55, 234;
  --color-primary-200: 194.5, 214.25, 220;
  --color-primary-300: 158.2, 189.8, 199;
  --color-primary-400: 121.9, 165.35, 178;
  --color-primary-500: 13, 92, 115;
  --color-primary-600: 1.95, 13.8, 17.25;
  --color-primary-700: 3.9, 27.6, 34.5;
  --color-primary-800: 5.85, 41.4, 51.75;
  --color-primary-900: 7.8, 55.2, 69;
  --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 {
  /* CTA strip gradient colors (accent-based for lowband) */
  --lb-cta-gradient-start-rgb: var(--lb-accent-main-rgb);
  --lb-cta-gradient-end-rgb: var(--lb-accent-strong-rgb);
}