:root {
  /* =======================================================================
     Brand color palette defaults (light mode)
     These values will be overridden at runtime by the Theme service.
  ======================================================================= */
  --web-primary-base: #1e3a8a;
  --web-primary-lowcontrast: #3b82f6;
  --web-primary-highcontrast: #172554;
  --web-primary-text-high: #ffffff;
  --web-primary-text-base: #f3f4f6;
  --web-primary-text-normal: #f3f4f6;
  --web-primary-text-low: #e0e7ff;
  --web-primary-soft: rgba(30, 58, 138, 0.1);
  --web-primary-soft-strong: rgba(30, 58, 138, 0.2);

  --web-secondary-base: #0ea5a4;
  --web-secondary-lowcontrast: #2dd4bf;
  --web-secondary-highcontrast: #0f766e;
  --web-secondary-text-high: #ffffff;
  --web-secondary-text-base: #ecfeff;
  --web-secondary-text-normal: #ecfeff;
  --web-secondary-text-low: #cffafe;
  --web-secondary-soft: rgba(14, 165, 164, 0.1);
  --web-secondary-soft-strong: rgba(14, 165, 164, 0.2);

  --web-tertiary-base: #8b5cf6;
  --web-tertiary-lowcontrast: #a78bfa;
  --web-tertiary-highcontrast: #6d28d9;
  --web-tertiary-text-high: #ffffff;
  --web-tertiary-text-base: #ede9fe;
  --web-tertiary-text-normal: #ede9fe;
  --web-tertiary-text-low: #ddd6fe;
  --web-tertiary-soft: rgba(139, 92, 246, 0.1);
  --web-tertiary-soft-strong: rgba(139, 92, 246, 0.2);

  --web-accent-base: #f59e0b;
  --web-accent-lowcontrast: #fbbf24;
  --web-accent-highcontrast: #b45309;
  --web-accent-text-high: #ffffff;
  --web-accent-text-base: #1f2937;
  --web-accent-text-normal: #fef3c7;
  --web-accent-text-low: #fde68a;
  --web-accent-soft: rgba(245, 158, 11, 0.1);
  --web-accent-soft-strong: rgba(245, 158, 11, 0.2);

  /* Neutral scale */
  --web-neutral-base: #f1f5f9;
  --web-neutral-lowcontrast: #e2e8f0;
  --web-neutral-highcontrast: #111827;
  --web-neutral-text-high: #111827;
  --web-neutral-text-base: #374151;
  --web-neutral-text-normal: #374151;
  --web-neutral-text-low: #6b7280;
  --web-neutral-soft: rgba(148, 163, 184, 0.15);
  --web-neutral-soft-strong: rgba(148, 163, 184, 0.25);

  /* Navigation & footer */
  --web-nav-background: #ffffff;
  --web-nav-border: #e2e8f0;
  --web-nav-text: #111827;
  --web-nav-text-hover: #1e3a8a;

  --web-footer-background: #f8fafc;
  --web-footer-border: #e2e8f0;
  --web-footer-text: #475569;
  --web-footer-text-accent: #1e3a8a;

  /* Page layout */
  --web-page-background: #ffffff;
  --web-page-title: #111827;
  --web-page-subtitle: #374151;
  --web-brand-name: #1e3a8a;

  /* Gradients (default to solid) */
  --web-page-gradient-enabled: 0;
  --web-page-gradient-angle: 135deg;
  --web-page-gradient-stop-1: rgba(30, 58, 138, 0);
  --web-page-gradient-stop-2: rgba(14, 165, 164, 0);
  --web-page-gradient-stop-3: rgba(245, 158, 11, 0);
  --web-page-gradient-image: none;

  /* Button defaults */
  --button-primary-bg-light: var(--web-primary-base);
  --button-primary-bg-hover-light: var(--web-primary-highcontrast);
  --button-primary-text-light: var(--web-primary-text-high);
  --button-primary-text-hover-light: var(--web-primary-text-high);
  --button-primary-border-light: transparent;
  --button-primary-border-hover-light: transparent;
  --button-primary-bg-dark: var(--web-primary-base);
  --button-primary-bg-hover-dark: var(--web-primary-lowcontrast);
  --button-primary-text-dark: var(--web-primary-text-high);
  --button-primary-text-hover-dark: var(--web-primary-text-high);
  --button-primary-border-dark: transparent;
  --button-primary-border-hover-dark: transparent;
  --button-primary-border-width: 0px;
  --button-primary-radius: 0.5rem;
  --button-primary-padding-y: 0.75rem;
  --button-primary-padding-x: 1.5rem;

  --button-secondary-bg-light: var(--web-secondary-base);
  --button-secondary-bg-hover-light: var(--web-secondary-highcontrast);
  --button-secondary-text-light: var(--web-secondary-text-high);
  --button-secondary-text-hover-light: var(--web-secondary-text-high);
  --button-secondary-border-light: transparent;
  --button-secondary-border-hover-light: transparent;
  --button-secondary-bg-dark: var(--web-secondary-base);
  --button-secondary-bg-hover-dark: var(--web-secondary-lowcontrast);
  --button-secondary-text-dark: var(--web-secondary-text-high);
  --button-secondary-text-hover-dark: var(--web-secondary-text-high);
  --button-secondary-border-dark: transparent;
  --button-secondary-border-hover-dark: transparent;
  --button-secondary-border-width: 0px;
  --button-secondary-radius: 0.5rem;
  --button-secondary-padding-y: 0.75rem;
  --button-secondary-padding-x: 1.5rem;

  --button-accent-bg-light: var(--web-accent-base);
  --button-accent-bg-hover-light: var(--web-accent-highcontrast);
  --button-accent-text-light: var(--web-accent-text-high);
  --button-accent-text-hover-light: var(--web-accent-text-high);
  --button-accent-border-light: transparent;
  --button-accent-border-hover-light: transparent;
  --button-accent-bg-dark: var(--web-accent-base);
  --button-accent-bg-hover-dark: var(--web-accent-lowcontrast);
  --button-accent-text-dark: var(--web-accent-text-high);
  --button-accent-text-hover-dark: var(--web-accent-text-high);
  --button-accent-border-dark: transparent;
  --button-accent-border-hover-dark: transparent;
  --button-accent-border-width: 0px;
  --button-accent-radius: 0.5rem;
  --button-accent-padding-y: 0.75rem;
  --button-accent-padding-x: 1.5rem;

  --button-outline-bg-light: transparent;
  --button-outline-bg-hover-light: var(--web-primary-soft);
  --button-outline-text-light: var(--web-primary-base);
  --button-outline-text-hover-light: var(--web-primary-text-high);
  --button-outline-border-light: var(--web-primary-base);
  --button-outline-border-hover-light: var(--web-primary-highcontrast);
  --button-outline-bg-dark: transparent;
  --button-outline-bg-hover-dark: var(--web-primary-soft-strong);
  --button-outline-text-dark: var(--web-primary-text-high);
  --button-outline-text-hover-dark: var(--web-primary-text-high);
  --button-outline-border-dark: var(--web-primary-base);
  --button-outline-border-hover-dark: var(--web-primary-lowcontrast);
  --button-outline-border-width: 2px;
  --button-outline-radius: 0.5rem;
  --button-outline-padding-y: 0.75rem;
  --button-outline-padding-x: 1.5rem;

  --button-ghost-bg-light: transparent;
  --button-ghost-bg-hover-light: var(--web-primary-soft);
  --button-ghost-text-light: var(--web-primary-base);
  --button-ghost-text-hover-light: var(--web-primary-text-high);
  --button-ghost-border-light: transparent;
  --button-ghost-border-hover-light: transparent;
  --button-ghost-bg-dark: transparent;
  --button-ghost-bg-hover-dark: var(--web-primary-soft-strong);
  --button-ghost-text-dark: var(--web-primary-text-high);
  --button-ghost-text-hover-dark: var(--web-primary-text-high);
  --button-ghost-border-dark: transparent;
  --button-ghost-border-hover-dark: transparent;
  --button-ghost-border-width: 0px;
  --button-ghost-radius: 0.5rem;
  --button-ghost-padding-y: 0.75rem;
  --button-ghost-padding-x: 1.5rem;
}

.dark {
  --web-primary-base: #1e3a8a;
  --web-primary-lowcontrast: #1d4ed8;
  --web-primary-highcontrast: #0f172a;
  --web-primary-text-high: #f8fafc;
  --web-primary-text-base: #e0e7ff;
  --web-primary-text-normal: #e0e7ff;
  --web-primary-text-low: #c7d2fe;
  --web-primary-soft: rgba(30, 58, 138, 0.3);
  --web-primary-soft-strong: rgba(30, 58, 138, 0.5);

  --web-secondary-base: #0ea5a4;
  --web-secondary-lowcontrast: #14b8a6;
  --web-secondary-highcontrast: #0d9488;
  --web-secondary-text-high: #f0fdfa;
  --web-secondary-text-base: #ccfbf1;
  --web-secondary-text-normal: #ccfbf1;
  --web-secondary-text-low: #99f6e4;
  --web-secondary-soft: rgba(13, 148, 136, 0.3);
  --web-secondary-soft-strong: rgba(13, 148, 136, 0.5);

  --web-tertiary-base: #8b5cf6;
  --web-tertiary-lowcontrast: #a855f7;
  --web-tertiary-highcontrast: #581c87;
  --web-tertiary-text-high: #f5f3ff;
  --web-tertiary-text-base: #ddd6fe;
  --web-tertiary-text-normal: #ddd6fe;
  --web-tertiary-text-low: #c4b5fd;
  --web-tertiary-soft: rgba(139, 92, 246, 0.3);
  --web-tertiary-soft-strong: rgba(139, 92, 246, 0.5);

  --web-accent-base: #f59e0b;
  --web-accent-lowcontrast: #f97316;
  --web-accent-highcontrast: #92400e;
  --web-accent-text-high: #fff7ed;
  --web-accent-text-base: #fed7aa;
  --web-accent-text-normal: #fed7aa;
  --web-accent-text-low: #fdba74;
  --web-accent-soft: rgba(245, 158, 11, 0.3);
  --web-accent-soft-strong: rgba(245, 158, 11, 0.5);

  --web-neutral-base: #1e293b;
  --web-neutral-lowcontrast: #334155;
  --web-neutral-highcontrast: #020617;
  --web-neutral-text-high: #f8fafc;
  --web-neutral-text-base: #e2e8f0;
  --web-neutral-text-normal: #e2e8f0;
  --web-neutral-text-low: #cbd5e1;
  --web-neutral-soft: rgba(148, 163, 184, 0.35);
  --web-neutral-soft-strong: rgba(148, 163, 184, 0.5);

  --web-nav-background: #1e293b;
  --web-nav-border: #334155;
  --web-nav-text: #f8fafc;
  --web-nav-text-hover: #38bdf8;

  --web-footer-background: #0f172a;
  --web-footer-border: #1e293b;
  --web-footer-text: #cbd5f5;
  --web-footer-text-accent: #38bdf8;

  --web-page-background: #0f172a;
  --web-page-title: #f8fafc;
  --web-page-subtitle: #e2e8f0;
  --web-brand-name: #38bdf8;

  --web-page-gradient-enabled: 0;
  --web-page-gradient-angle: 135deg;
  --web-page-gradient-stop-1: rgba(30, 58, 138, 0.2);
  --web-page-gradient-stop-2: rgba(14, 165, 164, 0.2);
  --web-page-gradient-stop-3: rgba(245, 158, 11, 0.15);
  --web-page-gradient-image: none;
}

/* =======================================================================
   Helper classes leveraging CSS custom properties
======================================================================= */

.bg-web-primary-base { background-color: var(--web-primary-base); color: var(--web-primary-text-high); }
.bg-web-primary-lowcontrast { background-color: var(--web-primary-lowcontrast); }
.bg-web-primary-highcontrast { background-color: var(--web-primary-highcontrast); color: var(--web-primary-text-high); }
.bg-web-primary-soft { background-color: var(--web-primary-soft); }
.bg-web-primary-soft-strong { background-color: var(--web-primary-soft-strong); }

.text-web-primary-base { color: var(--web-primary-text-base); }
.text-web-primary-text-base { color: var(--web-primary-text-base); }
.text-web-primary-text-high { color: var(--web-primary-text-high); }
.text-web-primary-text-low { color: var(--web-primary-text-low); }
.text-web-primary-contrast { color: var(--web-primary-text-high); }
.text-web-primary-muted { color: var(--web-primary-text-low); }

.bg-web-secondary-base { background-color: var(--web-secondary-base); color: var(--web-secondary-text-high); }
.bg-web-secondary-lowcontrast { background-color: var(--web-secondary-lowcontrast); }
.bg-web-secondary-highcontrast { background-color: var(--web-secondary-highcontrast); color: var(--web-secondary-text-high); }
.bg-web-secondary-soft { background-color: var(--web-secondary-soft); }
.bg-web-secondary-soft-strong { background-color: var(--web-secondary-soft-strong); }

.text-web-secondary-base { color: var(--web-secondary-text-base); }
.text-web-secondary-text-base { color: var(--web-secondary-text-base); }
.text-web-secondary-text-high { color: var(--web-secondary-text-high); }
.text-web-secondary-text-low { color: var(--web-secondary-text-low); }
.text-web-secondary-contrast { color: var(--web-secondary-text-high); }
.text-web-secondary-muted { color: var(--web-secondary-text-low); }

.bg-web-tertiary-base { background-color: var(--web-tertiary-base); color: var(--web-tertiary-text-high); }
.bg-web-tertiary-lowcontrast { background-color: var(--web-tertiary-lowcontrast); }
.bg-web-tertiary-highcontrast { background-color: var(--web-tertiary-highcontrast); color: var(--web-tertiary-text-high); }
.bg-web-tertiary-soft { background-color: var(--web-tertiary-soft); }
.bg-web-tertiary-soft-strong { background-color: var(--web-tertiary-soft-strong); }

.text-web-tertiary-base { color: var(--web-tertiary-text-base); }
.text-web-tertiary-text-base { color: var(--web-tertiary-text-base); }
.text-web-tertiary-text-high { color: var(--web-tertiary-text-high); }
.text-web-tertiary-text-low { color: var(--web-tertiary-text-low); }
.text-web-tertiary-contrast { color: var(--web-tertiary-text-high); }
.text-web-tertiary-muted { color: var(--web-tertiary-text-low); }

.bg-web-accent-base { background-color: var(--web-accent-base); color: var(--web-accent-text-high); }
.bg-web-accent-lowcontrast { background-color: var(--web-accent-lowcontrast); }
.bg-web-accent-highcontrast { background-color: var(--web-accent-highcontrast); color: var(--web-accent-text-high); }
.bg-web-accent-soft { background-color: var(--web-accent-soft); }
.bg-web-accent-soft-strong { background-color: var(--web-accent-soft-strong); }

.text-web-accent-base { color: var(--web-accent-text-base); }
.text-web-accent-text-base { color: var(--web-accent-text-base); }
.text-web-accent-text-high { color: var(--web-accent-text-high); }
.text-web-accent-text-low { color: var(--web-accent-text-low); }
.text-web-accent-contrast { color: var(--web-accent-text-high); }
.text-web-accent-muted { color: var(--web-accent-text-low); }

.bg-web-neutral-base { background-color: var(--web-neutral-base); color: var(--web-neutral-text-high); }
.bg-web-neutral-lowcontrast { background-color: var(--web-neutral-lowcontrast); }
.bg-web-neutral-highcontrast { background-color: var(--web-neutral-highcontrast); color: var(--web-neutral-text-high); }
.bg-web-neutral-soft { background-color: var(--web-neutral-soft); }
.bg-web-neutral-soft-strong { background-color: var(--web-neutral-soft-strong); }

.text-web-neutral-high { color: var(--web-neutral-text-high); }
.text-web-neutral-normal { color: var(--web-neutral-text-base); }
.text-web-neutral-low { color: var(--web-neutral-text-low); }

/* Neutral lowcontrast text colors */
.text-web-neutral-lowcontrast-text-base { color: var(--web-neutral-lowcontrast-text-base); }
.text-web-neutral-lowcontrast-text-low { color: var(--web-neutral-lowcontrast-text-low); }
.text-web-neutral-lowcontrast-text-high { color: var(--web-neutral-lowcontrast-text-high); }

/* Neutral highcontrast text colors */
.text-web-neutral-highcontrast-text-base { color: var(--web-neutral-highcontrast-text-base); }
.text-web-neutral-highcontrast-text-low { color: var(--web-neutral-highcontrast-text-low); }
.text-web-neutral-highcontrast-text-high { color: var(--web-neutral-highcontrast-text-high); }

.bg-web-nav-background { background-color: var(--web-nav-background); }
.text-web-nav { color: var(--web-nav-text); }
.hover\:text-web-nav-hover:hover { color: var(--web-nav-text-hover); }
.border-web-nav { border-color: var(--web-nav-border); }

.bg-web-footer-background { background-color: var(--web-footer-background); }
.text-web-footer { color: var(--web-footer-text); }
.text-web-footer-accent { color: var(--web-footer-text-accent); }
.border-web-footer { border-color: var(--web-footer-border); }

.bg-web-page-background {
  background-color: var(--web-page-background);
  background-image: var(--web-page-gradient-image, none);
}

.text-web-page-title { color: var(--web-page-title); }
.text-web-page-subtitle { color: var(--web-page-subtitle); }
.text-web-brand-name { color: var(--web-brand-name); }

.web-heading-color,
.web-textblock-heading-h1,
.web-textblock-heading-h2,
.web-textblock-heading-h3,
.web-textblock-heading-h4,
.web-textblock-heading-h5,
.web-textblock-heading-h6 {
  /* Use global heading color from theme settings (light mode via :root) */
  color: var(--web-heading-color, inherit);
}

/* Support headings inside elements with heading classes (for components like features, image_block, etc.) */
.web-textblock-heading-h1 h1,
.web-textblock-heading-h2 h2,
.web-textblock-heading-h3 h3,
.web-textblock-heading-h4 h4,
.web-textblock-heading-h5 h5,
.web-textblock-heading-h6 h6 {
  color: var(--web-heading-color, inherit);
}

/* Dark mode: explicitly use the --web-heading-color variable from .dark scope */
html.dark .web-heading-color,
html.dark .web-textblock-heading-h1,
html.dark .web-textblock-heading-h2,
html.dark .web-textblock-heading-h3,
html.dark .web-textblock-heading-h4,
html.dark .web-textblock-heading-h5,
html.dark .web-textblock-heading-h6 {
  /* Use dark mode heading color from theme settings */
  color: var(--web-heading-color, inherit);
}

html.dark .web-textblock-heading-h1 h1,
html.dark .web-textblock-heading-h2 h2,
html.dark .web-textblock-heading-h3 h3,
html.dark .web-textblock-heading-h4 h4,
html.dark .web-textblock-heading-h5 h5,
html.dark .web-textblock-heading-h6 h6 {
  color: var(--web-heading-color, inherit);
}

.bg-web-primary-base .web-heading-color,
.bg-web-primary-base .web-textblock-heading-h1,
.bg-web-primary-base .web-textblock-heading-h2,
.bg-web-primary-base .web-textblock-heading-h3,
.bg-web-primary-base .web-textblock-heading-h4,
.bg-web-primary-base .web-textblock-heading-h5,
.bg-web-primary-base .web-textblock-heading-h6,
.bg-web-primary-base .web-textblock-heading-h1 h1,
.bg-web-primary-base .web-textblock-heading-h2 h2,
.bg-web-primary-base .web-textblock-heading-h3 h3,
.bg-web-primary-base .web-textblock-heading-h4 h4,
.bg-web-primary-base .web-textblock-heading-h5 h5,
.bg-web-primary-base .web-textblock-heading-h6 h6 {
  color: var(--web-primary-heading-color, var(--web-heading-color));
}

/* Dark mode: brand colors should still use their own heading colors */
html.dark .bg-web-primary-base .web-heading-color,
html.dark .bg-web-primary-base .web-textblock-heading-h1,
html.dark .bg-web-primary-base .web-textblock-heading-h2,
html.dark .bg-web-primary-base .web-textblock-heading-h3,
html.dark .bg-web-primary-base .web-textblock-heading-h4,
html.dark .bg-web-primary-base .web-textblock-heading-h5,
html.dark .bg-web-primary-base .web-textblock-heading-h6,
html.dark .bg-web-primary-base .web-textblock-heading-h1 h1,
html.dark .bg-web-primary-base .web-textblock-heading-h2 h2,
html.dark .bg-web-primary-base .web-textblock-heading-h3 h3,
html.dark .bg-web-primary-base .web-textblock-heading-h4 h4,
html.dark .bg-web-primary-base .web-textblock-heading-h5 h5,
html.dark .bg-web-primary-base .web-textblock-heading-h6 h6 {
  color: var(--web-primary-heading-color, var(--web-heading-color));
}

.bg-web-secondary-base .web-heading-color,
.bg-web-secondary-base .web-textblock-heading-h1,
.bg-web-secondary-base .web-textblock-heading-h2,
.bg-web-secondary-base .web-textblock-heading-h3,
.bg-web-secondary-base .web-textblock-heading-h4,
.bg-web-secondary-base .web-textblock-heading-h5,
.bg-web-secondary-base .web-textblock-heading-h6,
.bg-web-secondary-base .web-textblock-heading-h1 h1,
.bg-web-secondary-base .web-textblock-heading-h2 h2,
.bg-web-secondary-base .web-textblock-heading-h3 h3,
.bg-web-secondary-base .web-textblock-heading-h4 h4,
.bg-web-secondary-base .web-textblock-heading-h5 h5,
.bg-web-secondary-base .web-textblock-heading-h6 h6 {
  color: var(--web-secondary-heading-color, var(--web-heading-color));
}

html.dark .bg-web-secondary-base .web-heading-color,
html.dark .bg-web-secondary-base .web-textblock-heading-h1,
html.dark .bg-web-secondary-base .web-textblock-heading-h2,
html.dark .bg-web-secondary-base .web-textblock-heading-h3,
html.dark .bg-web-secondary-base .web-textblock-heading-h4,
html.dark .bg-web-secondary-base .web-textblock-heading-h5,
html.dark .bg-web-secondary-base .web-textblock-heading-h6,
html.dark .bg-web-secondary-base .web-textblock-heading-h1 h1,
html.dark .bg-web-secondary-base .web-textblock-heading-h2 h2,
html.dark .bg-web-secondary-base .web-textblock-heading-h3 h3,
html.dark .bg-web-secondary-base .web-textblock-heading-h4 h4,
html.dark .bg-web-secondary-base .web-textblock-heading-h5 h5,
html.dark .bg-web-secondary-base .web-textblock-heading-h6 h6 {
  color: var(--web-secondary-heading-color, var(--web-heading-color));
}

.bg-web-tertiary-base .web-heading-color,
.bg-web-tertiary-base .web-textblock-heading-h1,
.bg-web-tertiary-base .web-textblock-heading-h2,
.bg-web-tertiary-base .web-textblock-heading-h3,
.bg-web-tertiary-base .web-textblock-heading-h4,
.bg-web-tertiary-base .web-textblock-heading-h5,
.bg-web-tertiary-base .web-textblock-heading-h6,
.bg-web-tertiary-base .web-textblock-heading-h1 h1,
.bg-web-tertiary-base .web-textblock-heading-h2 h2,
.bg-web-tertiary-base .web-textblock-heading-h3 h3,
.bg-web-tertiary-base .web-textblock-heading-h4 h4,
.bg-web-tertiary-base .web-textblock-heading-h5 h5,
.bg-web-tertiary-base .web-textblock-heading-h6 h6 {
  color: var(--web-tertiary-heading-color, var(--web-heading-color));
}

html.dark .bg-web-tertiary-base .web-heading-color,
html.dark .bg-web-tertiary-base .web-textblock-heading-h1,
html.dark .bg-web-tertiary-base .web-textblock-heading-h2,
html.dark .bg-web-tertiary-base .web-textblock-heading-h3,
html.dark .bg-web-tertiary-base .web-textblock-heading-h4,
html.dark .bg-web-tertiary-base .web-textblock-heading-h5,
html.dark .bg-web-tertiary-base .web-textblock-heading-h6,
html.dark .bg-web-tertiary-base .web-textblock-heading-h1 h1,
html.dark .bg-web-tertiary-base .web-textblock-heading-h2 h2,
html.dark .bg-web-tertiary-base .web-textblock-heading-h3 h3,
html.dark .bg-web-tertiary-base .web-textblock-heading-h4 h4,
html.dark .bg-web-tertiary-base .web-textblock-heading-h5 h5,
html.dark .bg-web-tertiary-base .web-textblock-heading-h6 h6 {
  color: var(--web-tertiary-heading-color, var(--web-heading-color));
}

.bg-web-accent-base .web-heading-color,
.bg-web-accent-base .web-textblock-heading-h1,
.bg-web-accent-base .web-textblock-heading-h2,
.bg-web-accent-base .web-textblock-heading-h3,
.bg-web-accent-base .web-textblock-heading-h4,
.bg-web-accent-base .web-textblock-heading-h5,
.bg-web-accent-base .web-textblock-heading-h6,
.bg-web-accent-base .web-textblock-heading-h1 h1,
.bg-web-accent-base .web-textblock-heading-h2 h2,
.bg-web-accent-base .web-textblock-heading-h3 h3,
.bg-web-accent-base .web-textblock-heading-h4 h4,
.bg-web-accent-base .web-textblock-heading-h5 h5,
.bg-web-accent-base .web-textblock-heading-h6 h6 {
  color: var(--web-accent-heading-color, var(--web-heading-color));
}

html.dark .bg-web-accent-base .web-heading-color,
html.dark .bg-web-accent-base .web-textblock-heading-h1,
html.dark .bg-web-accent-base .web-textblock-heading-h2,
html.dark .bg-web-accent-base .web-textblock-heading-h3,
html.dark .bg-web-accent-base .web-textblock-heading-h4,
html.dark .bg-web-accent-base .web-textblock-heading-h5,
html.dark .bg-web-accent-base .web-textblock-heading-h6,
html.dark .bg-web-accent-base .web-textblock-heading-h1 h1,
html.dark .bg-web-accent-base .web-textblock-heading-h2 h2,
html.dark .bg-web-accent-base .web-textblock-heading-h3 h3,
html.dark .bg-web-accent-base .web-textblock-heading-h4 h4,
html.dark .bg-web-accent-base .web-textblock-heading-h5 h5,
html.dark .bg-web-accent-base .web-textblock-heading-h6 h6 {
  color: var(--web-accent-heading-color, var(--web-heading-color));
}

.bg-web-neutral-lowcontrast .web-heading-color,
.bg-web-neutral-lowcontrast .web-textblock-heading-h1,
.bg-web-neutral-lowcontrast .web-textblock-heading-h2,
.bg-web-neutral-lowcontrast .web-textblock-heading-h3,
.bg-web-neutral-lowcontrast .web-textblock-heading-h4,
.bg-web-neutral-lowcontrast .web-textblock-heading-h5,
.bg-web-neutral-lowcontrast .web-textblock-heading-h6,
.bg-web-neutral-soft .web-textblock-heading-h4,
.bg-web-neutral-soft .web-textblock-heading-h5,
.bg-web-neutral-soft .web-textblock-heading-h6,
.bg-web-neutral-soft .web-textblock-heading-h1 h1,
.bg-web-neutral-soft .web-textblock-heading-h2 h2,
.bg-web-neutral-soft .web-textblock-heading-h3 h3,
.bg-web-neutral-soft .web-textblock-heading-h4 h4,
.bg-web-neutral-soft .web-textblock-heading-h5 h5,
.bg-web-neutral-soft .web-textblock-heading-h6 h6,
.bg-web-neutral-soft-strong .web-heading-color,
.bg-web-neutral-soft-strong .web-textblock-heading-h1,
.bg-web-neutral-soft-strong .web-textblock-heading-h2,
.bg-web-neutral-soft-strong .web-textblock-heading-h3,
.bg-web-neutral-soft-strong .web-textblock-heading-h4,
.bg-web-neutral-soft-strong .web-textblock-heading-h5,
.bg-web-neutral-soft-strong .web-textblock-heading-h6,
.bg-web-neutral-soft-strong .web-textblock-heading-h1 h1,
.bg-web-neutral-soft-strong .web-textblock-heading-h2 h2,
.bg-web-neutral-soft-strong .web-textblock-heading-h3 h3,
.bg-web-neutral-soft-strong .web-textblock-heading-h4 h4,
.bg-web-neutral-soft-strong .web-textblock-heading-h5 h5,
.bg-web-neutral-soft-strong .web-textblock-heading-h6 h6 {
  color: var(--web-neutral-lowcontrast-heading-color, var(--web-neutral-heading-color, var(--web-heading-color)));
}

html.dark .bg-web-neutral-lowcontrast .web-heading-color,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h1,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h2,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h3,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h4,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h5,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h6,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h1 h1,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h2 h2,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h3 h3,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h4 h4,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h5 h5,
html.dark .bg-web-neutral-lowcontrast .web-textblock-heading-h6 h6,
html.dark .bg-web-neutral-base .web-heading-color,
html.dark .bg-web-neutral-base .web-textblock-heading-h1,
html.dark .bg-web-neutral-base .web-textblock-heading-h2,
html.dark .bg-web-neutral-base .web-textblock-heading-h3,
html.dark .bg-web-neutral-base .web-textblock-heading-h4,
html.dark .bg-web-neutral-base .web-textblock-heading-h5,
html.dark .bg-web-neutral-base .web-textblock-heading-h6,
html.dark .bg-web-neutral-base .web-textblock-heading-h1 h1,
html.dark .bg-web-neutral-base .web-textblock-heading-h2 h2,
html.dark .bg-web-neutral-base .web-textblock-heading-h3 h3,
html.dark .bg-web-neutral-base .web-textblock-heading-h4 h4,
html.dark .bg-web-neutral-base .web-textblock-heading-h5 h5,
html.dark .bg-web-neutral-base .web-textblock-heading-h6 h6,
html.dark .bg-web-neutral-soft .web-heading-color,
html.dark .bg-web-neutral-soft .web-textblock-heading-h1,
html.dark .bg-web-neutral-soft .web-textblock-heading-h2,
html.dark .bg-web-neutral-soft .web-textblock-heading-h3,
html.dark .bg-web-neutral-soft .web-textblock-heading-h4,
html.dark .bg-web-neutral-soft .web-textblock-heading-h5,
html.dark .bg-web-neutral-soft .web-textblock-heading-h6,
html.dark .bg-web-neutral-soft .web-textblock-heading-h1 h1,
html.dark .bg-web-neutral-soft .web-textblock-heading-h2 h2,
html.dark .bg-web-neutral-soft .web-textblock-heading-h3 h3,
html.dark .bg-web-neutral-soft .web-textblock-heading-h4 h4,
html.dark .bg-web-neutral-soft .web-textblock-heading-h5 h5,
html.dark .bg-web-neutral-soft .web-textblock-heading-h6 h6,
html.dark .bg-web-neutral-soft-strong .web-heading-color,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h1,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h2,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h3,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h4,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h5,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h6,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h1 h1,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h2 h2,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h3 h3,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h4 h4,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h5 h5,
html.dark .bg-web-neutral-soft-strong .web-textblock-heading-h6 h6 {
  color: var(--web-neutral-lowcontrast-heading-color, var(--web-neutral-heading-color, var(--web-heading-color)));
}

.bg-web-neutral-highcontrast .web-heading-color,
.bg-web-neutral-highcontrast .web-textblock-heading-h1,
.bg-web-neutral-highcontrast .web-textblock-heading-h2,
.bg-web-neutral-highcontrast .web-textblock-heading-h3,
.bg-web-neutral-highcontrast .web-textblock-heading-h4,
.bg-web-neutral-highcontrast .web-textblock-heading-h5,
.bg-web-neutral-highcontrast .web-textblock-heading-h6,
.bg-web-neutral-highcontrast .web-textblock-heading-h1 h1,
.bg-web-neutral-highcontrast .web-textblock-heading-h2 h2,
.bg-web-neutral-highcontrast .web-textblock-heading-h3 h3,
.bg-web-neutral-highcontrast .web-textblock-heading-h4 h4,
.bg-web-neutral-highcontrast .web-textblock-heading-h5 h5,
.bg-web-neutral-highcontrast .web-textblock-heading-h6 h6 {
  color: var(--web-neutral-highcontrast-heading-color, var(--web-neutral-heading-color, var(--web-heading-color)));
}

html.dark .bg-web-neutral-highcontrast .web-heading-color,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h1,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h2,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h3,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h4,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h5,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h6,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h1 h1,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h2 h2,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h3 h3,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h4 h4,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h5 h5,
html.dark .bg-web-neutral-highcontrast .web-textblock-heading-h6 h6 {
  color: var(--web-neutral-highcontrast-heading-color, var(--web-neutral-heading-color, var(--web-heading-color)));
}

/* Ensure empty paragraphs in textblock content are displayed as blank lines */
.web-textblock-heading-h1 p:empty,
.web-textblock-heading-h2 p:empty,
.web-textblock-heading-h3 p:empty,
.web-textblock-heading-h4 p:empty,
.web-textblock-heading-h5 p:empty,
.web-textblock-heading-h6 p:empty,
.web-textblock-paragraph p:empty,
.web-textblock-default p:empty,
.web-textblock-lead p:empty,
.web-textblock-caption p:empty,
.web-textblock-quote p:empty,
.web-textblock-quote-small p:empty,
.web-textblock-quote-medium p:empty,
.web-textblock-quote-large p:empty,
.web-textblock-code p:empty {
  min-height: 1.5em;
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Zero-width space to ensure empty paragraphs are rendered */
.web-textblock-heading-h1 p:empty:before,
.web-textblock-heading-h2 p:empty:before,
.web-textblock-heading-h3 p:empty:before,
.web-textblock-heading-h4 p:empty:before,
.web-textblock-heading-h5 p:empty:before,
.web-textblock-heading-h6 p:empty:before,
.web-textblock-paragraph p:empty:before,
.web-textblock-default p:empty:before,
.web-textblock-lead p:empty:before,
.web-textblock-caption p:empty:before,
.web-textblock-quote p:empty:before,
.web-textblock-quote-small p:empty:before,
.web-textblock-quote-medium p:empty:before,
.web-textblock-quote-large p:empty:before,
.web-textblock-code p:empty:before {
  content: '\200B';
}

.web-textblock-paragraph,
.web-textblock-default {
  /* Color inherits from parent - use resolve_text_color() in templates */
  /* Default fallback only if no parent color is set */
  color: inherit;
}

.web-textblock-lead {
  /* Color inherits from parent - use resolve_text_color() in templates */
  /* Default fallback only if no parent color is set */
  color: inherit;
}

.web-textblock-caption {
  /* Color inherits from parent - use resolve_text_color() in templates */
  /* Default fallback only if no parent color is set */
  color: inherit;
}

.web-textblock-code {
  /* Color inherits from parent - use resolve_text_color() in templates */
  /* Default fallback only if no parent color is set */
  color: inherit;
}

.web-textblock-quote,
.web-textblock-quote-small,
.web-textblock-quote-medium,
.web-textblock-quote-large {
  color: var(--web-neutral-text-normal);
  border-color: var(--web-primary-base);
}

/* Contrast helper tokens (backward compatibility - will be removed after data migration) */
.bg-contrast-transparent { background-color: transparent; }
.bg-contrast-light { background-color: var(--web-neutral-base); }
.dark .bg-contrast-light { background-color: var(--web-neutral-lowcontrast); }
.bg-contrast-medium { background-color: var(--web-neutral-lowcontrast); }
.dark .bg-contrast-medium { background-color: var(--web-neutral-base); }
.bg-contrast-accent { background-color: var(--web-accent-soft); }
.dark .bg-contrast-accent { background-color: var(--web-accent-soft-strong); }

.text-contrast-high { color: var(--web-neutral-text-high); }
.dark .text-contrast-high { color: var(--web-neutral-text-high); }
.text-contrast-normal { color: var(--web-neutral-text-normal); }
.dark .text-contrast-normal { color: var(--web-neutral-text-normal); }
.text-contrast-low { color: var(--web-neutral-text-low); }
.dark .text-contrast-low { color: var(--web-neutral-text-low); }
.text-contrast-accent { color: #ffffff; } /* White text for hero backgrounds with images */
.dark .text-contrast-accent { color: #ffffff; } /* Always white, even in dark mode */

/* Button helpers */
.web-btn-surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease;
}

.web-btn-primary-surface {
  background-color: var(--button-primary-bg-light);
  color: var(--button-primary-text-light);
  border-style: solid;
  border-width: var(--button-primary-border-width);
  border-color: var(--button-primary-border-light);
  border-radius: var(--button-primary-radius);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
}
.web-btn-primary-surface:hover,
.web-btn-primary-surface:focus {
  background-color: var(--button-primary-bg-hover-light);
  color: var(--button-primary-text-hover-light);
  border-color: var(--button-primary-border-hover-light);
}
.dark .web-btn-primary-surface {
  background-color: var(--button-primary-bg-dark);

/* =======================================================================
   Mobile Responsive Overrides
   Override container widths on mobile for better text visibility
======================================================================= */

@media (max-width: 639px) {
  /* Override all container widths on mobile to full width */
  .max-w-3xl,
  .max-w-4xl,
  .max-w-5xl,
  .max-w-6xl,
  .max-w-7xl {
    max-width: 100% !important;
  }
  
  /* Reduce padding on mobile for more text space */
  .px-4 {
    padding-left: 0.75rem !important; /* 12px instead of 16px */
    padding-right: 0.75rem !important;
  }
}
  color: var(--button-primary-text-dark);
  border-color: var(--button-primary-border-dark);
}
.dark .web-btn-primary-surface:hover,
.dark .web-btn-primary-surface:focus {
  background-color: var(--button-primary-bg-hover-dark);
  color: var(--button-primary-text-hover-dark);
  border-color: var(--button-primary-border-hover-dark);
}

.web-btn-secondary-surface {
  background-color: var(--button-secondary-bg-light);
  color: var(--button-secondary-text-light);
  border-style: solid;
  border-width: var(--button-secondary-border-width);
  border-color: var(--button-secondary-border-light);
  border-radius: var(--button-secondary-radius);
  padding: var(--button-secondary-padding-y) var(--button-secondary-padding-x);
}
.web-btn-secondary-surface:hover,
.web-btn-secondary-surface:focus {
  background-color: var(--button-secondary-bg-hover-light);
  color: var(--button-secondary-text-hover-light);
  border-color: var(--button-secondary-border-hover-light);
}
.dark .web-btn-secondary-surface {
  background-color: var(--button-secondary-bg-dark);
  color: var(--button-secondary-text-dark);
  border-color: var(--button-secondary-border-dark);
}
.dark .web-btn-secondary-surface:hover,
.dark .web-btn-secondary-surface:focus {
  background-color: var(--button-secondary-bg-hover-dark);
  color: var(--button-secondary-text-hover-dark);
  border-color: var(--button-secondary-border-hover-dark);
}

.web-btn-accent-surface {
  background-color: var(--button-accent-bg-light);
  color: var(--button-accent-text-light);
  border-style: solid;
  border-width: var(--button-accent-border-width);
  border-color: var(--button-accent-border-light);
  border-radius: var(--button-accent-radius);
  padding: var(--button-accent-padding-y) var(--button-accent-padding-x);
}
.web-btn-accent-surface:hover,
.web-btn-accent-surface:focus {
  background-color: var(--button-accent-bg-hover-light);
  color: var(--button-accent-text-hover-light);
  border-color: var(--button-accent-border-hover-light);
}
.dark .web-btn-accent-surface {
  background-color: var(--button-accent-bg-dark);
  color: var(--button-accent-text-dark);
  border-color: var(--button-accent-border-dark);
}
.dark .web-btn-accent-surface:hover,
.dark .web-btn-accent-surface:focus {
  background-color: var(--button-accent-bg-hover-dark);
  color: var(--button-accent-text-hover-dark);
  border-color: var(--button-accent-border-hover-dark);
}

.web-btn-outline-surface {
  background-color: var(--button-outline-bg-light);
  color: var(--button-outline-text-light);
  border-style: solid;
  border-width: var(--button-outline-border-width);
  border-color: var(--button-outline-border-light);
  border-radius: var(--button-outline-radius);
  padding: var(--button-outline-padding-y) var(--button-outline-padding-x);
}
.web-btn-outline-surface:hover,
.web-btn-outline-surface:focus {
  background-color: var(--button-outline-bg-hover-light);
  color: var(--button-outline-text-hover-light);
  border-color: var(--button-outline-border-hover-light);
}
.dark .web-btn-outline-surface {
  background-color: var(--button-outline-bg-dark);
  color: var(--button-outline-text-dark);
  border-color: var(--button-outline-border-dark);
}
.dark .web-btn-outline-surface:hover,
.dark .web-btn-outline-surface:focus {
  background-color: var(--button-outline-bg-hover-dark);
  color: var(--button-outline-text-hover-dark);
  border-color: var(--button-outline-border-hover-dark);
}

.web-btn-ghost-surface {
  background-color: var(--button-ghost-bg-light);
  color: var(--button-ghost-text-light);
  border-style: solid;
  border-width: var(--button-ghost-border-width);
  border-color: var(--button-ghost-border-light);
  border-radius: var(--button-ghost-radius);
  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
}
.web-btn-ghost-surface:hover,
.web-btn-ghost-surface:focus {
  background-color: var(--button-ghost-bg-hover-light);
  color: var(--button-ghost-text-hover-light);
  border-color: var(--button-ghost-border-hover-light);
}
.dark .web-btn-ghost-surface {
  background-color: var(--button-ghost-bg-dark);
  color: var(--button-ghost-text-dark);
  border-color: var(--button-ghost-border-dark);
}
.dark .web-btn-ghost-surface:hover,
.dark .web-btn-ghost-surface:focus {
  background-color: var(--button-ghost-bg-hover-dark);
  color: var(--button-ghost-text-hover-dark);
  border-color: var(--button-ghost-border-hover-dark);
}

/* Link helper */
.link-web-default {
  color: var(--web-primary-base);
}
.link-web-default:hover {
  color: var(--web-primary-highcontrast);
}

/* Autolink generated links - underline with same text color */
.text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  /* Inherit text color from parent - don't change color */
  color: inherit;
}
.text-link:hover {
  /* Slightly darker on hover for feedback, but keep same color family */
  opacity: 0.8;
  text-decoration-thickness: 2px;
}

/* Hover/focus helpers (backward compatibility - maintained for existing components) */
.hover\:bg-web-primary-highcontrast:hover,
.focus\:bg-web-primary-highcontrast:focus {
  background-color: var(--web-primary-highcontrast);
}

.hover\:bg-web-secondary-highcontrast:hover,
.focus\:bg-web-secondary-highcontrast:focus {
  background-color: var(--web-secondary-highcontrast);
}

.hover\:bg-web-accent-highcontrast:hover,
.focus\:bg-web-accent-highcontrast:focus {
  background-color: var(--web-accent-highcontrast);
}

.hover\:text-web-primary-highcontrast:hover {
  color: var(--web-primary-highcontrast);
}

.hover\:text-web-secondary-highcontrast:hover {
  color: var(--web-secondary-highcontrast);
}

.hover\:text-web-accent-highcontrast:hover {
  color: var(--web-accent-highcontrast);
}

/* =======================================================================
   Mobile Responsive Overrides (Portrait & Landscape)
======================================================================= */

@media (max-width: 767px) {
  /* Nav alignment - minimal padding */
  nav .px-4 {
    padding-left: 0.5rem !important; /* 8px */
    padding-right: 0.5rem !important;
  }
  /* Main content alignment */
  main .max-w-7xl,
  main .max-w-6xl,
  main .max-w-5xl,
  main .max-w-4xl,
  main .max-w-3xl {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Force full width header on ALL mobile (portrait + landscape) */
  header {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  /* Force full width nav and footer in landscape */
  nav, footer {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Inner content padding - same as portrait */
  nav > div, footer > div {
    padding-left: 0.5rem !important; /* 8px - same as portrait */
    padding-right: 0.5rem !important;
  }
}