/* Brand recolor: matches the "Webinar Booking" blue-on-black design system. */

:root {
  /* Core brand */
  --brand: oklch(55% 0.18 255);
  --brand-light: oklch(70% 0.15 255);
  --brand-deep: oklch(45% 0.15 255);
  --brand-text-on-light: oklch(45% 0.15 255);
  --brand-on-inverted-chip: var(--brand-text-on-light);

  /* Gradients */
  --brand-gradient: linear-gradient(200deg, #1e3a8a, #93c5fd 42%, #60a5fa 50%, #2563eb);
  --brand-bar-gradient: linear-gradient(272deg, #1e3a8a -10%, #60a5fa 8%, #2563eb 55%, #1d4ed8 110%);
  --brand-surface-tint: linear-gradient(
    243deg,
    #1e3a8a0f -14.79%,
    #93c5fd0f 68.01%,
    #2563eb0f 106.73%,
    #1d4ed80f 151.46%
  );
  --brand-text-gradient: linear-gradient(210deg, #1d4ed8 0%, #93c5fd 29%, #3b82f6 69%, #2563eb 100%);
  --brand-text-gradient-light: linear-gradient(
    88deg,
    #60a5fa 0%,
    #93c5fd 50%,
    #3b82f6 73%,
    #1d4ed8 100%
  );

  /* Brochure / amp accents remapped from gold to blue */
  --brochure-gold: oklch(62% 0.17 255);
  --amp-gold: #3b82f6;
  --amp-gold-bright: #bfdbfe;
  --amp-gold-brown: #1e3a8a;
  --amp-gold-deep: #1d4ed8;
  --amp-glyph-gold: #93c5fd;
  --amp-glyph-brown: #172554;
  --amp-badge-hi: #dbeafe;
  --amp-badge-mid: #93c5fd;
  --amp-check: #3b82f6;
  --amp-check-deep: #1d4ed8;
  --amp-chip-bg: #eff6ff;
  --amp-chip-ring: #60a5fa;
  --amp-cream-hi: #f8fbff;
  --amp-cream-lo: #eaf2fe;
  --amp-bronze: #1e3a8a;
  --amp-brown: #172554;
  --amp-navy: #000e28;
  --amp-plan-ink: #2f3540;
}

/* Rules that hardcode the old gold */
.editorial-prose > p:first-of-type::first-letter {
  color: #60a5fa;
}

.testimonial-quote-stop-3 {
  stop-color: #60a5fa;
}

/* Typography: Figtree, matching the reference design system */
:root {
  --font-sans: Figtree, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --default-font-family: var(--font-sans);
  --font-heading: var(--font-sans);
}

html,
body,
.font-sans,
.font-heading {
  font-family: var(--font-sans);
}

/* White text on blue/brand backgrounds */
:root {
  --primary-foreground: #ffffff;
  --brand-foreground: #ffffff;
}

.bg-brand,
.bg-primary,
.text-primary-foreground,
.bg-brand *,
.bg-primary * {
  color: #ffffff;
}

/* Main CTA button style from the Webinar Booking design system */
.cta-pulse {
  --cta-base: oklch(55% 0.18 255);
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  background-color: transparent;
  background-image: linear-gradient(272deg, #1e3a8a -10%, #3b82f6 8%, #2563eb 55%, #1d4ed8 110%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 oklch(from var(--cta-base) 0.97 0.03 h / 0.5),
    inset 0 -1px 0 oklch(from var(--cta-base) 0.2 0.04 h / 0.4),
    0 1px 2px oklch(0% 0 0 / 0.45),
    0 8px 22px -10px oklch(from var(--cta-base) l c h / 0.3);
  transition:
    box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.2s;
}

.cta-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image: linear-gradient(
    110deg,
    transparent 30%,
    oklch(1 0 0 / 0.35) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: cta-shine 3.6s linear infinite;
}

.cta-pulse:hover {
  filter: brightness(1.03);
  box-shadow:
    inset 0 1px 0 oklch(from var(--cta-base) 0.97 0.03 h / 0.5),
    inset 0 -1px 0 oklch(from var(--cta-base) 0.2 0.04 h / 0.4),
    0 1px 2px oklch(0% 0 0 / 0.45),
    0 11px 26px -10px oklch(from var(--cta-base) l c h / 0.36);
}

@keyframes cta-shine {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(100%);
  }
}