:root {
  --wa-color-brand-95: #f0f5ff;
  --wa-color-brand-90: #e0ecff;
  --wa-color-brand-80: #bcd5ff;
  --wa-color-brand-70: #91b8ff;
  --wa-color-brand-60: #5e94fb;
  --wa-color-brand-50: #2e6ee8;
  --wa-color-brand-40: #1f55c4;
  --wa-color-brand-30: #173f99;
  --wa-color-brand-20: #122e6e;
  --wa-color-brand-10: #0b1c45;
  --wa-color-brand-05: #06102b;
  --wa-color-brand: var(--wa-color-brand-50);
  --wa-color-brand-on: white;

  --wa-color-surface-raised: #ffffff;
  --wa-color-surface-default: #fbfcfe;
  --wa-color-surface-lowered: #f3f6fb;
  --wa-color-surface-border: #e4e9f2;

  --wa-color-text-normal: #101a2d;
  --wa-color-text-quiet: #54627c;
  --wa-color-text-link: var(--wa-color-brand-40);

  --wa-color-shadow: rgb(16 38 84 / 0.08);
  --wa-color-focus: var(--wa-color-brand-60);

  --wa-color-brand-fill-quiet: #eef4ff;
  --wa-color-brand-fill-normal: #dde9ff;
  --wa-color-brand-fill-loud: var(--wa-color-brand);
  --wa-color-brand-border-quiet: #dde9ff;
  --wa-color-brand-border-normal: var(--wa-color-brand-80);
  --wa-color-brand-border-loud: var(--wa-color-brand-50);
  --wa-color-brand-on-quiet: var(--wa-color-brand-30);
  --wa-color-brand-on-normal: var(--wa-color-brand-20);
  --wa-color-brand-on-loud: white;

  --reai-ink: #0b1c45;
  --reai-gradient: linear-gradient(135deg, #2e6ee8, #1f55c4);
  --reai-gradient-soft: linear-gradient(135deg, #eef4ff, #f0f5ff);

  --wa-font-family-body: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-heading: var(--wa-font-family-body);
}

html {
  font-family: var(--wa-font-family-body);
}

.reai-gradient-text {
  background: var(--reai-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reai-gradient-bg {
  background: var(--reai-gradient);
}

.reai-ink-section {
  background:
    radial-gradient(60rem 30rem at 80% -10%, rgb(46 110 232 / 0.25), transparent 60%),
    radial-gradient(40rem 24rem at 10% 110%, rgb(94 148 251 / 0.15), transparent 60%),
    var(--reai-ink);
}

.reai-grid-bg {
  background-image:
    linear-gradient(to right, rgb(11 28 69 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(11 28 69 / 0.045) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

:where(wa-dialog, wa-drawer, wa-tab-group, wa-carousel, wa-details, wa-popover, wa-comparison):not(:defined) {
  display: none;
}