:root,
[data-theme="light"] {
  /* Typography */
  --brand-font-heading: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-body: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Beyond Blue-aligned core palette */
  --bb-blue: #1775e4;
  --bb-blue-bright: #0070f0;
  --bb-blue-deep: #2042ca;
  --bb-navy: #23286c;
  --bb-ink: #102e57;
  --bb-pink: #db3161;
  --bb-yellow: #f6b21b;
  --bb-red-overlap: #b2252a;

  /* Brand-facing aliases */
  --brand-color-primary: var(--bb-blue);
  --brand-color-primary-hover: #005bbb;
  --brand-color-primary-strong: var(--bb-blue-deep);
  --brand-color-primary-deep: var(--bb-navy);
  --brand-color-primary-soft: #e7f2ff;
  --brand-color-primary-highlight: #d5eaff;

  --brand-color-coral: var(--bb-pink);
  --brand-color-coral-strong: #bf1f4f;
  --brand-color-coral-soft: #ffe1eb;

  --brand-color-yellow: var(--bb-yellow);
  --brand-color-yellow-strong: #d88900;
  --brand-color-yellow-soft: #fff1c8;

  /* Page and surfaces */
  --brand-color-sky: #f4f9ff;
  --brand-color-sky-2: #eaf4ff;
  --brand-color-sky-3: #d7ebff;
  --brand-color-surface: #ffffff;
  --brand-color-surface-offset: #f8fbff;
  --brand-color-surface-warm: #fffaf0;

  /* Text */
  --brand-color-text: var(--bb-ink);
  --brand-color-heading: #102e57;
  --brand-color-text-muted: #506f91;
  --brand-color-text-faint: #7d96b2;

  /* Structure */
  --brand-color-border: #bfdcf8;
  --brand-color-border-strong: #8dc0f0;
  --brand-color-divider: rgba(16, 46, 87, 0.12);

  /* Status */
  --brand-color-danger: var(--bb-pink);
  --brand-color-warning: #9a5b00;

  /* Shape */
  --brand-radius-xs: 8px;
  --brand-radius-sm: 14px;
  --brand-radius-md: 20px;
  --brand-radius-lg: 28px;
  --brand-radius-xl: 36px;
  --brand-radius-full: 999px;

  /* Shadows: slightly stronger blue cast to move away from grey SaaS */
  --brand-shadow-soft: 0 6px 18px rgba(23, 117, 228, 0.08);
  --brand-shadow-card: 0 16px 36px rgba(16, 46, 87, 0.12);
  --brand-shadow-lift: 0 22px 52px rgba(16, 46, 87, 0.14);

  /* Rhythm */
  --brand-line-height-body: 1.72;
  --brand-line-height-relaxed: 1.8;
  --brand-letter-spacing-heading: -0.032em;
  --brand-letter-spacing-tight: -0.02em;
  --brand-space-section: clamp(4.75rem, 9vw, 8rem);
  --brand-space-card: clamp(1.25rem, 2vw, 1.75rem);

  /* Semantic bridge consumed by styles.css */
  --color-bg: var(--brand-color-sky);
  --color-surface: var(--brand-color-surface);
  --color-surface-2: var(--brand-color-sky-2);
  --color-surface-offset: var(--brand-color-surface-offset);
  --color-border: var(--brand-color-border);
  --color-divider: var(--brand-color-divider);
  --color-text: var(--brand-color-text);
  --color-text-muted: var(--brand-color-text-muted);
  --color-text-faint: var(--brand-color-text-faint);
  --color-primary: var(--brand-color-primary);
  --color-primary-strong: var(--brand-color-primary-hover);
  --color-primary-soft: var(--brand-color-primary-soft);
  --color-primary-highlight: var(--brand-color-primary-highlight);
  --color-coral: var(--brand-color-coral);
  --color-coral-soft: var(--brand-color-coral-soft);
  --color-amber: var(--brand-color-yellow);
  --color-amber-soft: var(--brand-color-yellow-soft);
  --color-orange-highlight: var(--brand-color-yellow-soft);
  --color-warning: var(--brand-color-warning);
  --color-danger: var(--brand-color-danger);
  --shadow-sm: var(--brand-shadow-soft);
  --shadow-md: var(--brand-shadow-card);
  --shadow-lg: var(--brand-shadow-lift);
  --radius-sm: var(--brand-radius-sm);
  --radius-md: var(--brand-radius-md);
  --radius-lg: var(--brand-radius-xl);
  --radius-full: var(--brand-radius-full);
  --font-display: var(--brand-font-heading);
  --font-body: var(--brand-font-body);

  /* Legacy/footer aliases still referenced in styles.css */
  --ink: var(--brand-color-heading);
  --muted: var(--brand-color-text-muted);
  --link: var(--brand-color-primary);

  /* Spacing aliases referenced by some presentation components */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space: 1.5rem;
}

[data-theme="dark"] {
  --bb-blue: #7bbcff;
  --bb-blue-bright: #8dc7ff;
  --bb-blue-deep: #9aadff;
  --bb-navy: #dbe7ff;
  --bb-ink: #f3f8ff;
  --bb-pink: #ff7aa0;
  --bb-yellow: #ffd36c;
  --bb-red-overlap: #ff9d9d;

  --brand-color-primary: var(--bb-blue);
  --brand-color-primary-hover: #a8d4ff;
  --brand-color-primary-strong: #dcecff;
  --brand-color-primary-deep: #dbe7ff;
  --brand-color-primary-soft: #123c68;
  --brand-color-primary-highlight: #1a4f82;

  --brand-color-coral: var(--bb-pink);
  --brand-color-coral-strong: #ff9bb7;
  --brand-color-coral-soft: #4d2132;
  --brand-color-yellow: var(--bb-yellow);
  --brand-color-yellow-strong: #ffe39a;
  --brand-color-yellow-soft: #4b3710;

  --brand-color-sky: #061728;
  --brand-color-sky-2: #0c2742;
  --brand-color-sky-3: #123b61;
  --brand-color-surface: #0f243a;
  --brand-color-surface-offset: #122b45;
  --brand-color-surface-warm: #1d2733;

  --brand-color-text: #f3f8ff;
  --brand-color-heading: #f8fbff;
  --brand-color-text-muted: #bdd0e3;
  --brand-color-text-faint: #8aa3bd;
  --brand-color-border: #294b6d;
  --brand-color-border-strong: #4778a8;
  --brand-color-divider: rgba(255, 255, 255, 0.1);
  --brand-color-danger: var(--bb-pink);
  --brand-color-warning: #ffd36c;

  --brand-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.24);
  --brand-shadow-card: 0 16px 36px rgba(0, 0, 0, 0.34);
  --brand-shadow-lift: 0 22px 52px rgba(0, 0, 0, 0.42);
}

/* Token-backed utility classes */
.brand-heading {
  font-family: var(--brand-font-heading);
  font-weight: 600;
  letter-spacing: var(--brand-letter-spacing-heading);
  color: var(--brand-color-heading);
}

.brand-body {
  font-family: var(--brand-font-body);
  line-height: var(--brand-line-height-body);
  color: var(--brand-color-text);
}

.brand-surface {
  background: var(--brand-color-surface);
  border: 1px solid var(--brand-color-border);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-soft);
}

.brand-button-primary {
  background: var(--brand-color-primary);
  color: #ffffff;
  border-radius: var(--brand-radius-sm);
  font-family: var(--brand-font-heading);
  font-weight: 600;
}

.brand-button-primary:hover,
.brand-button-primary:focus-visible {
  background: var(--brand-color-primary-hover);
}

.brand-button-secondary {
  background: var(--brand-color-surface);
  color: var(--brand-color-primary);
  border: 1px solid var(--brand-color-border-strong);
  border-radius: var(--brand-radius-sm);
  font-family: var(--brand-font-heading);
  font-weight: 500;
}

.brand-accent {
  color: var(--brand-color-coral);
}

/* Final presentation alignment overrides
   These are deliberately minimal and cover the hard-coded areas in styles.css
   that pure variables cannot fully shift. */
body {
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--bb-blue-bright) 12%, transparent), transparent 34rem),
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--bb-yellow) 10%, transparent), transparent 30rem),
    var(--color-bg);
}

.site-header {
  background: color-mix(in srgb, var(--color-bg) 92%, white);
  border-bottom-color: color-mix(in srgb, var(--bb-blue) 16%, var(--color-border));
}

.brand-mark {
  background: color-mix(in srgb, var(--bb-blue) 12%, white);
  color: var(--bb-blue);
  border: 1px solid color-mix(in srgb, var(--bb-blue) 16%, var(--color-border));
}

.hero::before {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--bb-blue-bright) 16%, transparent), transparent 30%),
    radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--bb-pink) 13%, transparent), transparent 25%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-color-primary-highlight) 42%, white), transparent 64%);
}

.button-primary,
.nav-cta,
button.primary,
button.cta-primary,
.stage-node.active,
.audience-tab.active {
  background: var(--bb-blue);
  border-color: var(--bb-blue);
  color: #ffffff;
}

.button-primary:hover,
.nav-cta:hover,
button.primary:hover,
button.cta-primary:hover {
  background: var(--brand-color-primary-hover);
  border-color: var(--brand-color-primary-hover);
}

.button-secondary:hover,
.theme-toggle:hover,
.storyboard-tab:hover,
.journey-tab:hover,
.filter-chip:hover,
button.secondary:hover,
button.cta-secondary:hover,
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--brand-color-primary-highlight) 78%, white);
  color: var(--brand-color-primary-hover);
}

.signal-chip,
.journey-principles span,
.journey-meta,
.stage-badge,
.tag,
.badge,
.status-pill,
.hero-kicker,
.eyebrow {
  background: color-mix(in srgb, var(--brand-color-primary-highlight) 72%, white);
  border-color: color-mix(in srgb, var(--bb-blue) 20%, var(--color-border));
  color: var(--brand-color-primary-hover);
}

.journey-meta-risk,
.badge-risk,
.status-risk,
.tag-risk {
  background: color-mix(in srgb, var(--bb-pink) 12%, white);
  color: var(--bb-pink);
  border-color: color-mix(in srgb, var(--bb-pink) 28%, var(--color-border));
}

.badge-warm,
.status-warm,
.tag-warm,
.callout-warm,
.note-warm {
  background: color-mix(in srgb, var(--bb-yellow) 22%, white);
  color: color-mix(in srgb, var(--bb-yellow) 48%, var(--color-text));
  border-color: color-mix(in srgb, var(--bb-yellow) 34%, var(--color-border));
}

.surface-card::after,
.narrative-card::after,
.storyboard-card::after,
.architecture-card::after,
.governance-card::after,
.roadmap-card::after,
.audience-panel::after,
.info-card::after,
.tech-card::after {
  background: linear-gradient(90deg, var(--bb-blue), var(--bb-pink) 54%, var(--bb-yellow));
}

.section-divider::before,
.roadmap-card::before {
  background: linear-gradient(90deg, var(--bb-blue), var(--bb-pink) 55%, var(--bb-yellow));
}

.tech-card,
.audience-panel,
.roadmap-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-color-primary-highlight) 30%, white), white 54%);
}

.storyboard-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-pink) 10%, white), white 54%);
}

.governance-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bb-yellow) 12%, white), white 54%);
}

.site-footer {
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--bb-blue-bright) 15%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--bb-yellow) 12%, transparent), transparent 26rem),
    linear-gradient(180deg, #f4f9ff 0%, #e8f3ff 100%);
  border-top: 1px solid color-mix(in srgb, var(--bb-blue) 16%, var(--color-border));
}

.footer-links-panel,
.footer-status {
  background: color-mix(in srgb, white 86%, var(--brand-color-primary-highlight));
  border-color: color-mix(in srgb, var(--bb-blue) 16%, var(--color-border));
  box-shadow: 0 18px 45px rgba(16, 46, 87, 0.08);
}

.footer-kicker,
.footer-label {
  background: color-mix(in srgb, white 82%, var(--brand-color-primary-highlight));
  border-color: color-mix(in srgb, var(--bb-blue) 18%, var(--color-border));
  color: var(--brand-color-primary-hover);
}

.footer-links a {
  color: var(--bb-blue);
  border-color: color-mix(in srgb, var(--bb-blue) 18%, var(--color-border));
}

.footer-links a:hover,
.footer-links a:focus-visible {
  border-color: color-mix(in srgb, var(--bb-blue) 42%, var(--color-border));
  box-shadow: 0 10px 24px rgba(16, 46, 87, 0.12);
}