.haven-animation {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.haven-animation__atmosphere {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--haven-anim-ring) 0%, transparent 62%);
  opacity: 0.1;
  pointer-events: none;
}

.haven-animation__disc {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--haven-anim-surface);
  box-shadow:
    inset 0 -10px 28px hsl(0 0% 0% / 0.28),
    inset 0 8px 18px hsl(0 0% 100% / 0.05),
    0 12px 32px hsl(0 0% 0% / 0.28);
  pointer-events: none;
}

.haven-animation__inner-ring {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid var(--haven-anim-ring);
  opacity: 0.16;
  pointer-events: none;
}

.haven-animation__rotor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  perspective: 600px;
  transform-style: preserve-3d;
  will-change: transform;
}

.haven-animation[data-system='morph']:not([data-state='idle']) .haven-animation__rotor,
.haven-animation[data-system='workflow'] .haven-animation__rotor {
  animation: haven-animation-rotor-spin 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.haven-animation__glyph-slot,
.haven-animation__symbol-slot {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
  will-change: opacity, transform, filter;
}

.haven-animation__glyph {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.haven-animation__symbol-slot {
  z-index: 3;
  opacity: 0;
}

.haven-animation__symbol {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}

@keyframes haven-animation-rotor-spin {
  to {
    transform: rotateY(-360deg);
  }
}

@keyframes haven-animation-morph-out {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  55% {
    opacity: 0;
    transform: scale(0.32);
    filter: blur(4px);
  }

  100% {
    opacity: 0;
    transform: scale(0.32);
    filter: blur(4px);
  }
}

@keyframes haven-animation-morph-in {
  0% {
    opacity: 0;
    transform: scale(0.32);
    filter: blur(4px);
  }

  45% {
    opacity: 0.55;
    transform: scale(0.7);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.haven-animation[data-phase='icon'][data-system='morph'] .haven-animation__glyph-slot,
.haven-animation[data-phase='icon'][data-system='workflow'] .haven-animation__glyph-slot {
  animation: haven-animation-morph-out var(--haven-anim-morph-duration)
    var(--haven-anim-morph-easing) forwards;
}

.haven-animation[data-phase='icon'][data-system='morph'] .haven-animation__symbol-slot,
.haven-animation[data-phase='icon'][data-system='workflow'] .haven-animation__symbol-slot {
  animation: haven-animation-morph-in var(--haven-anim-morph-duration)
    var(--haven-anim-morph-easing) forwards;
}

.haven-animation[data-phase='mark'][data-system='morph'] .haven-animation__symbol-slot,
.haven-animation[data-phase='mark'][data-system='workflow'] .haven-animation__symbol-slot {
  animation: haven-animation-morph-out var(--haven-anim-morph-duration)
    var(--haven-anim-morph-easing) forwards;
}

.haven-animation[data-phase='mark'][data-system='morph'] .haven-animation__glyph-slot,
.haven-animation[data-phase='mark'][data-system='workflow'] .haven-animation__glyph-slot {
  animation: haven-animation-morph-in var(--haven-anim-morph-duration)
    var(--haven-anim-morph-easing) forwards;
}

.haven-animation[data-system='orb'] .haven-animation__glyph-slot {
  animation: haven-animation-orb-drift var(--haven-anim-orb-drift-duration) ease-in-out infinite;
}

.haven-animation[data-system='orb'] .haven-animation__glyph {
  animation: haven-animation-orb-breath var(--haven-anim-orb-breath-duration) ease-in-out infinite;
}

@keyframes haven-animation-orb-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(2%, -3%);
  }
}

@keyframes haven-animation-orb-breath {
  0%,
  100% {
    transform: scale(0.96);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes haven-animation-orb-atmos {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.12;
    transform: scale(1.02);
  }
}

.haven-animation[data-phase='icon'][data-state='listening'] .haven-animation__symbol {
  animation: haven-animation-breath 2.4s ease-in-out 0.45s infinite;
}

.haven-animation[data-state='listening'] .haven-animation__atmosphere {
  animation: haven-animation-atmos 2.4s ease-in-out infinite;
  opacity: 0.16;
}

.haven-animation[data-phase='icon'][data-state='waiting'] .haven-animation__symbol {
  animation: haven-animation-wave 2s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='understanding'] .haven-animation__symbol {
  animation: haven-animation-pulse 2.4s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='exploring'] .haven-animation__symbol {
  animation: haven-animation-scan 3.6s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='evaluating'] .haven-animation__symbol {
  animation: haven-animation-needle 4s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='planning'] .haven-animation__symbol {
  animation: haven-animation-focus 3s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='acting'] .haven-animation__symbol {
  animation: haven-animation-flicker 1.6s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='monitoring'] .haven-animation__symbol {
  animation: haven-animation-sway 7s ease-in-out 0.45s infinite;
}

.haven-animation[data-phase='icon'][data-state='alerting'] .haven-animation__symbol {
  animation: haven-animation-alert 1.4s ease-in-out 0.45s infinite;
}

.haven-animation[data-state='alerting'] .haven-animation__atmosphere {
  animation: haven-animation-atmos 1.4s ease-in-out infinite;
  opacity: 0.24;
}

@keyframes haven-animation-breath {
  0%,
  100% {
    transform: scale(0.94);
  }

  50% {
    transform: scale(1.02);
  }
}

@keyframes haven-animation-scan {
  0%,
  100% {
    transform: translateX(-7%);
  }

  50% {
    transform: translateX(7%);
  }
}

@keyframes haven-animation-needle {
  0%,
  100% {
    transform: rotate(-14deg);
  }

  50% {
    transform: rotate(14deg);
  }
}

@keyframes haven-animation-focus {
  0%,
  100% {
    transform: scale(0.92);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes haven-animation-flicker {
  0%,
  100% {
    transform: translateY(3%) scale(0.98);
  }

  50% {
    transform: translateY(-3%) scale(1.05);
  }
}

@keyframes haven-animation-sway {
  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

@keyframes haven-animation-alert {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes haven-animation-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes haven-animation-wave {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(18deg);
  }

  75% {
    transform: rotate(-10deg);
  }
}

@keyframes haven-animation-atmos {
  0%,
  100% {
    transform: scale(0.96);
  }

  50% {
    transform: scale(1.04);
  }
}

.haven-animation[data-reduced='true'] *,
.haven-animation[data-reduced='true'] {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .haven-animation *,
  .haven-animation {
    animation: none !important;
  }
}

.haven-animation[data-chrome='bare'] .haven-animation__glyph {
  filter: drop-shadow(0 6px 22px hsl(0 0% 0% / 0.35));
}

.haven-animation[data-chrome='bare'][data-system='orb'] .haven-animation__glyph-slot {
  animation: haven-animation-orb-drift var(--haven-anim-orb-drift-duration) ease-in-out infinite;
}

.haven-animation[data-chrome='bare'][data-system='orb'] .haven-animation__glyph {
  animation: haven-animation-orb-breath var(--haven-anim-orb-breath-duration) ease-in-out infinite;
}

.haven-animation[data-chrome='bare'] .haven-animation__symbol {
  filter: drop-shadow(0 4px 14px hsl(0 0% 0% / 0.45));
}
/*!
 * Haven Design System v1.3.0
 * Generated by packages/design-system/scripts/build-tokens.mjs — do not edit by hand.
 * Source of truth: HAVENGlobal2025/design-from-love src/pages/*.tsx (compiled into tokens.json)
 */
:root {
  --haven-navy: hsl(192 94% 12%);
  --haven-electric-yellow: hsl(65 75% 52%);
  --haven-off-white: hsl(195 10% 95%);
  --haven-sage-green: hsl(154 16% 55%);
  --haven-fog: hsl(192 30% 68%);
  --haven-rain: hsl(199 30% 50%);
  --haven-turquoise: hsl(190 69% 33%);
  --haven-blue-gray: hsl(203 37% 32%);
  --haven-periwinkle: hsl(223 40% 69%);
  --haven-coastal-green: hsl(104 34% 59%);
  --haven-soft-citrus: hsl(64 66% 75%);
  --haven-vibrant-peach: hsl(28 91% 71%);
  --haven-sunset: hsl(25 71% 61%);
  --haven-orchid: hsl(312 38% 60%);
  --haven-plum: hsl(318 96% 28%);
  --haven-color-hex-navy: #02303C;
  --haven-color-hex-electric-yellow: #CDDC2B;
  --haven-color-hex-off-white: #EFF2F3;
  --haven-color-hex-sage-green: #7C9F90;
  --haven-color-hex-fog: #98BCC5;
  --haven-color-hex-rain: #588DA5;
  --haven-color-hex-turquoise: #1A798D;
  --haven-color-hex-blue-gray: #345970;
  --haven-color-hex-periwinkle: #8FA2D3;
  --haven-color-hex-coastal-green: #87BA74;
  --haven-color-hex-soft-citrus: #E5EA97;
  --haven-color-hex-vibrant-peach: #F9B173;
  --haven-color-hex-sunset: #E08F57;
  --haven-color-hex-orchid: #BF73B0;
  --haven-color-hex-plum: #8A0361;
  --haven-role-key: hsl(192 94% 40%);
  --haven-role-key-on: hsl(0 0% 100%);
  --haven-role-accent: hsl(65 75% 52%);
  --haven-role-accent-on: hsl(192 94% 12%);
  --haven-role-surface: hsl(195 10% 90%);
  --haven-role-surface-on: hsl(192 94% 12%);
  --haven-role-error: hsl(0 72% 40%);
  --haven-role-error-on: hsl(0 0% 100%);
  --haven-role-neutral: hsl(192 10% 50%);
  --haven-role-neutral-on: hsl(0 0% 100%);
  --haven-role-neutral-variant: hsl(192 16% 50%);
  --haven-role-neutral-variant-on: hsl(0 0% 100%);
  --haven-surface-canvas-light: hsl(195 10% 95%);
  --haven-surface-canvas-dark: hsl(192 94% 8%);
  --haven-surface-card-light: hsl(0 0% 100%);
  --haven-surface-card-dark: hsl(192 52% 14%);
  --haven-surface-sidebar-light: hsl(0 0% 100%);
  --haven-surface-sidebar-dark: hsl(192 52% 14%);
  --haven-background-default-light: hsl(195 10% 95%);
  --haven-background-default-dark: hsl(192 94% 8%);
  --haven-text-primary-light: hsl(192 94% 12%);
  --haven-text-primary-dark: hsl(195 10% 95%);
  --haven-text-secondary-light: hsl(192 10% 36%);
  --haven-text-secondary-dark: hsl(192 16% 78%);
  --haven-border-default-light: hsl(192 16% 82%);
  --haven-border-default-dark: hsl(192 16% 28%);
  --haven-font-family-heading: Volte, Work Sans, sans-serif;
  --haven-font-family-body: Neue Haas Grotesk Text Pro, Inter, sans-serif;
  --haven-font-family-mono: JetBrains Mono, monospace;
  --haven-font-size-xs: 0.75rem;
  --haven-font-size-sm: 0.875rem;
  --haven-font-size-md: 1rem;
  --haven-font-size-lg: 1.125rem;
  --haven-font-size-xl: 1.25rem;
  --haven-font-size-2xl: 1.5rem;
  --haven-font-size-3xl: 1.875rem;
  --haven-font-size-4xl: 2.25rem;
  --haven-font-size-5xl: 3rem;
  --haven-font-size-6xl: 3.75rem;
  --haven-font-size-7xl: 4.5rem;
  --haven-font-size-8xl: 6rem;
  --haven-font-size-9xl: 8rem;
  --haven-font-weight-normal: 400;
  --haven-font-weight-medium: 500;
  --haven-font-weight-semibold: 600;
  --haven-font-weight-bold: 700;
  --haven-line-height-none: 1;
  --haven-line-height-shorter: 1.25;
  --haven-line-height-short: 1.375;
  --haven-line-height-base: 1.5;
  --haven-line-height-tall: 1.625;
  --haven-line-height-taller: 2;
  --haven-letter-spacing-tighter: -0.025em;
  --haven-letter-spacing-normal: 0;
  --haven-letter-spacing-wide: 0.05em;
  --haven-space-0: 0px;
  --haven-space-1: 4px;
  --haven-space-2: 8px;
  --haven-space-3: 12px;
  --haven-space-4: 16px;
  --haven-space-5: 20px;
  --haven-space-6: 24px;
  --haven-space-8: 32px;
  --haven-space-10: 40px;
  --haven-space-12: 48px;
  --haven-space-16: 64px;
  --haven-space-20: 80px;
  --haven-space-24: 96px;
  --haven-space-0-5: 2px;
  --haven-radius-sm: calc(0.75rem - 4px);
  --haven-radius-md: calc(0.75rem - 2px);
  --haven-radius-base: 0.75rem;
  --haven-radius-lg: 0.75rem;
  --haven-radius-xl: 1rem;
  --haven-radius-2xl: 1.5rem;
  --haven-radius-full: 9999px;
  --haven-shadow-sm: 0 1px 2px 0 hsl(192 94% 12% / 0.05);
  --haven-shadow-md: 0 4px 6px -1px hsl(192 94% 12% / 0.1);
  --haven-shadow-lg: 0 10px 15px -3px hsl(192 94% 12% / 0.1);
  --haven-shadow-glow: 0 0 20px hsl(65 75% 52% / 0.3);
  --haven-elevation-surface: 0 1px 2px 0 hsl(192 94% 12% / 0.05);
  --haven-elevation-raised: 0 4px 6px -1px hsl(192 94% 12% / 0.1);
  --haven-elevation-overlay: 0 10px 15px -3px hsl(192 94% 12% / 0.1);
  --haven-elevation-accent-glow: 0 0 20px hsl(65 75% 52% / 0.3);
  --haven-gradient-primary: linear-gradient(135deg, hsl(192 94% 12%), hsl(190 69% 33%));
  --haven-gradient-accent: linear-gradient(135deg, hsl(65 75% 52%), hsl(104 34% 59%));
  --haven-breakpoint-mobile: 0px;
  --haven-breakpoint-tablet: 768px;
  --haven-breakpoint-desktop: 1024px;
  --haven-breakpoint-wide: 1440px;
  --haven-grid-columns-mobile: 4;
  --haven-grid-columns-tablet: 8;
  --haven-grid-columns-desktop: 12;
  --haven-grid-columns-wide: 12;
  --haven-grid-gutter-mobile: 16px;
  --haven-grid-gutter-tablet: 24px;
  --haven-grid-gutter-desktop: 24px;
  --haven-grid-gutter-wide: 32px;
  --haven-grid-margin-mobile: 16px;
  --haven-grid-margin-tablet: 32px;
  --haven-grid-margin-desktop: 48px;
  --haven-grid-margin-wide: auto;
  --haven-icon-size-xs: 16px;
  --haven-icon-size-sm: 20px;
  --haven-icon-size-md: 24px;
  --haven-icon-size-lg: 32px;
  --haven-icon-size-xl: 40px;
  --haven-icon-stroke-width: 2;
  --haven-graphic-divider-bar-thickness: 4px;
  --haven-graphic-divider-bar-radius: 9999px;
  --haven-graphic-grid-line-weight: 1px;
  --haven-chart-categorical-1: hsl(192 94% 12%);
  --haven-chart-categorical-2: hsl(28 91% 71%);
  --haven-chart-categorical-3: hsl(190 69% 33%);
  --haven-chart-categorical-4: hsl(64 66% 75%);
  --haven-chart-categorical-5: hsl(104 34% 59%);
  --haven-chart-primary-data: hsl(192 94% 12%);
  --haven-chart-secondary-data: hsl(190 69% 33%);
  --haven-chart-tertiary-data: hsl(154 16% 55%);
  --haven-chart-surface: hsl(192 30% 68%);
  --haven-chart-legend-dot-size: 12px;
  --haven-risk-none: hsl(192 30% 68%);
  --haven-risk-low: hsl(199 30% 50%);
  --haven-risk-medium: hsl(64 66% 75%);
  --haven-risk-high: hsl(28 91% 71%);
  --haven-risk-critical: hsl(0 72% 50%);
  --haven-meaning-intelligence: hsl(64 66% 75%);
  --haven-meaning-action: hsl(190 69% 33%);
  --haven-meaning-progress: hsl(104 34% 59%);
  --haven-meaning-accent: hsl(65 75% 52%);
  --haven-domain-1: hsl(223 40% 69%);
  --haven-domain-2: hsl(312 38% 60%);
  --haven-domain-3: hsl(25 71% 61%);
  --haven-photography-monochrome-turquoise: hsl(190 69% 33%);
  --haven-photography-monochrome-fog: hsl(192 30% 68%);
  --haven-photography-monochrome-periwinkle: hsl(223 40% 69%);
  --haven-photography-monochrome-sunset: hsl(25 71% 61%);
  --haven-photography-monochrome-vibrant-peach: hsl(28 91% 71%);
  --haven-photography-monochrome-coastal-green: hsl(104 34% 59%);
  --haven-photography-overlay-color: hsl(199 30% 50%);
  --haven-photography-overlay-opacity: 0.16;
  --haven-logo-min-height-full: 24px;
  --haven-logo-min-height-mark: 16px;
  --haven-logo-min-height-full-print: 10mm;
  --haven-logo-min-height-mark-print: 6mm;
  --haven-presence-size-sm: 56px;
  --haven-presence-size-md: 112px;
  --haven-presence-size-lg: 176px;
  --haven-presence-size-xl: 280px;
  --haven-motion-duration-fast: 150ms;
  --haven-motion-duration-base: 200ms;
  --haven-motion-duration-smooth: 300ms;
  --haven-motion-duration-workflow-step: 2400ms;
  --haven-motion-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --haven-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --haven-motion-easing-out: ease-out;
  --haven-navy-0: hsl(192 94% 0%);
  --haven-navy-10: hsl(192 94% 10%);
  --haven-navy-20: hsl(192 94% 20%);
  --haven-navy-30: hsl(192 94% 30%);
  --haven-navy-40: hsl(192 94% 40%);
  --haven-navy-50: hsl(192 94% 50%);
  --haven-navy-60: hsl(192 94% 60%);
  --haven-navy-70: hsl(192 94% 70%);
  --haven-navy-80: hsl(192 94% 80%);
  --haven-navy-90: hsl(192 94% 90%);
  --haven-navy-95: hsl(192 94% 95%);
  --haven-navy-99: hsl(192 94% 99%);
  --haven-navy-100: hsl(192 94% 100%);
  --haven-electric-yellow-0: hsl(65 75% 0%);
  --haven-electric-yellow-10: hsl(65 75% 10%);
  --haven-electric-yellow-20: hsl(65 75% 20%);
  --haven-electric-yellow-30: hsl(65 75% 30%);
  --haven-electric-yellow-40: hsl(65 75% 40%);
  --haven-electric-yellow-50: hsl(65 75% 50%);
  --haven-electric-yellow-60: hsl(65 75% 60%);
  --haven-electric-yellow-70: hsl(65 75% 70%);
  --haven-electric-yellow-80: hsl(65 75% 80%);
  --haven-electric-yellow-90: hsl(65 75% 90%);
  --haven-electric-yellow-95: hsl(65 75% 95%);
  --haven-electric-yellow-99: hsl(65 75% 99%);
  --haven-electric-yellow-100: hsl(65 75% 100%);
  --haven-off-white-0: hsl(195 10% 0%);
  --haven-off-white-10: hsl(195 10% 10%);
  --haven-off-white-20: hsl(195 10% 20%);
  --haven-off-white-30: hsl(195 10% 30%);
  --haven-off-white-40: hsl(195 10% 40%);
  --haven-off-white-50: hsl(195 10% 50%);
  --haven-off-white-60: hsl(195 10% 60%);
  --haven-off-white-70: hsl(195 10% 70%);
  --haven-off-white-80: hsl(195 10% 80%);
  --haven-off-white-90: hsl(195 10% 90%);
  --haven-off-white-95: hsl(195 10% 95%);
  --haven-off-white-99: hsl(195 10% 99%);
  --haven-off-white-100: hsl(195 10% 100%);
  --haven-error-0: hsl(0 72% 0%);
  --haven-error-10: hsl(0 72% 10%);
  --haven-error-20: hsl(0 72% 20%);
  --haven-error-30: hsl(0 72% 30%);
  --haven-error-40: hsl(0 72% 40%);
  --haven-error-50: hsl(0 72% 50%);
  --haven-error-60: hsl(0 72% 60%);
  --haven-error-70: hsl(0 72% 70%);
  --haven-error-80: hsl(0 72% 80%);
  --haven-error-90: hsl(0 72% 90%);
  --haven-error-95: hsl(0 72% 95%);
  --haven-error-99: hsl(0 72% 99%);
  --haven-error-100: hsl(0 72% 100%);
  --haven-neutral-0: hsl(192 10% 0%);
  --haven-neutral-10: hsl(192 10% 10%);
  --haven-neutral-20: hsl(192 10% 20%);
  --haven-neutral-30: hsl(192 10% 30%);
  --haven-neutral-40: hsl(192 10% 40%);
  --haven-neutral-50: hsl(192 10% 50%);
  --haven-neutral-60: hsl(192 10% 60%);
  --haven-neutral-70: hsl(192 10% 70%);
  --haven-neutral-80: hsl(192 10% 80%);
  --haven-neutral-90: hsl(192 10% 90%);
  --haven-neutral-95: hsl(192 10% 95%);
  --haven-neutral-99: hsl(192 10% 99%);
  --haven-neutral-100: hsl(192 10% 100%);
  --haven-neutral-variant-0: hsl(192 16% 0%);
  --haven-neutral-variant-10: hsl(192 16% 10%);
  --haven-neutral-variant-20: hsl(192 16% 20%);
  --haven-neutral-variant-30: hsl(192 16% 30%);
  --haven-neutral-variant-40: hsl(192 16% 40%);
  --haven-neutral-variant-50: hsl(192 16% 50%);
  --haven-neutral-variant-60: hsl(192 16% 60%);
  --haven-neutral-variant-70: hsl(192 16% 70%);
  --haven-neutral-variant-80: hsl(192 16% 80%);
  --haven-neutral-variant-90: hsl(192 16% 90%);
  --haven-neutral-variant-95: hsl(192 16% 95%);
  --haven-neutral-variant-99: hsl(192 16% 99%);
  --haven-neutral-variant-100: hsl(192 16% 100%);
}