:root {
  --palette-ice: #d4d4d8;
  --palette-mint-soft: #a1a1aa;
  --palette-mint: #71717a;
  --palette-teal: #52525b;
  --palette-teal-deep: #3f3f46;
  --palette-petrol: #27272a;

  --brand-main: #ffffff;
  --primary: #f43f5e;
  --primary-hover: #e11d48;
  --secondary: #10b981;
  --secondary-hover: #059669;
  --primary-rgb: 244, 63, 94;
  --secondary-rgb: 16, 185, 129;

  --bg-body: #050506;
  --bg-shell: rgba(24, 24, 27, .96);
  --bg-panel: #27272a;
  --bg-panel-deep: #18181b;
  --bg-input: #111113;
  --bg-input-hover: #1c1c1f;
  --header-gray: #303034;
  --header-hover: #37373c;
  --text-main: #f4f4f5;
  --text-label: #d4d4d8;
  --text-muted: #a1a1aa;
  --border: #3f3f46;
  --border-soft: rgba(255,255,255,.07);
  --danger: #fb7185;
  --warning: #fbbf24;
  --shadow-soft: 0 24px 80px rgba(0,0,0,.48);

  --site-background-color: #050506;
  --site-background-gradient: radial-gradient(circle at 14% -10%, rgba(244,63,94,.08), transparent 28rem), radial-gradient(circle at 88% 8%, rgba(255,255,255,.035), transparent 32rem), linear-gradient(180deg, #070708 0%, #030304 100%);
  --site-background-image: none;
  --site-background-image-opacity: 0;
  --site-texture-rgb: 255,255,255;
  --site-texture-opacity: .035;
  --site-texture-size: 36px;
  --header-space-top: 28px;
  --header-space-bottom: 26px;
  --footer-gap: 48px;
  --footer-bg-color: rgba(9,9,11,.90);
  --brand-logo-width: 155px;
  --tool-label-vertical-offset: 0px;
}

html { color-scheme: dark; }

body {
  color: var(--text-main);
  background-color: var(--site-background-color) !important;
  background-image: var(--site-background-gradient) !important;
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  display: block !important;
  background-image: var(--site-background-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: var(--site-background-image-opacity) !important;
  pointer-events: none !important;
  mask-image: none !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  background-position: 0 0;
  background-repeat: repeat;
  background-size: var(--site-texture-size) var(--site-texture-size);
  opacity: var(--site-texture-opacity);
  pointer-events: none;
}

body[data-site-texture="none"]::after { display: none; }
body[data-site-texture="dots"]::after {
  background-image: radial-gradient(circle, rgba(var(--site-texture-rgb),1) 1.2px, transparent 1.4px);
}
body[data-site-texture="grid"]::after {
  background-image:
    linear-gradient(rgba(var(--site-texture-rgb),1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--site-texture-rgb),1) 1px, transparent 1px);
}
body[data-site-texture="diagonal"]::after {
  background-image: repeating-linear-gradient(135deg, rgba(var(--site-texture-rgb),1) 0 1px, transparent 1px 8px);
}

::selection { background: rgba(244,63,94,.30); color: #fff; }