/* Shared brand, theme and sizing tokens. Media breakpoints use rem in style.css
   because native CSS custom properties are not supported in media queries. */
:root {
  color-scheme: light;
  --font-body: "Avenir Next", "Segoe UI", sans-serif;
  --nav: #06183a;
  --text: #17243a;
  --canvas: #f8faff;
  --surface: #ffffff;
  --surface-soft: #edf2fa;
  --blue: #0057ff;
  --blue-hover: #0046cf;
  --link: #0057ff;
  --muted: #5a5f6b;
  --line: #d6deeb;
  --accent: #0a84ff;
  --brand-green: #2ecc71;
  --on-primary: #ffffff;
  --logo-tile: #ffffff;
  --on-dark: #cbd8ee;
  --on-dark-accent: #a7d8ff;
  --nav-active: #16438a;
  --nav-hover: #102e60;
  --success-bg: #e5f5ee;
  --success-text: #176443;
  --warning-bg: #fff4d9;
  --warning-text: #73500c;
  --warning-line: #dac688;
  --error-bg: #ffebeb;
  --error-text: #a12525;
  --info-text: #254e91;
  --dot-grid: #dde6f6;
  --decorative: #3e6bab;
  --hero-glow: #102856;
  --hero-edge: #10364b;
  --glass: #ffffff1a;
  --glass-soft: #ffffff0a;
  --glass-strong: #ffffff33;
  --accent-wash: #0057ff40;
  --shadow-blue: #0057ff30;
  --shadow-navy: #06183a26;
  --backdrop: #06183ab0;
  --accent-glow: #0a84ff40;
  --focus: #0057ff;
  --space-1: 0.0625rem;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --text-11: 0.6875rem;
  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-32: 2rem;
  --text-40: 2.5rem;
  --text-56: 3.5rem;
  --text-72: 4.5rem;
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-32: 2rem;
  --size-32: 2rem;
  --size-235: 14.6875rem;
  --size-190: 11.875rem;
  --size-30: 1.875rem;
  --size-29: 1.8125rem;
  --size-7: 0.4375rem;
  --size-12: 0.75rem;
  --size-21: 1.3125rem;
  --size-22: 1.375rem;
  --size-35: 2.1875rem;
  --size-78: 4.875rem;
  --size-1450: 90.625rem;
  --size-420: 26.25rem;
  --size-300: 18.75rem;
  --size-650: 40.625rem;
  --size-90: 5.625rem;
  --size-550: 34.375rem;
  --size-430: 26.875rem;
  --size-490: 30.625rem;
  --size-450: 28.125rem;
  --size-180: 11.25rem;
  --size-370: 23.125rem;
  --size-110: 6.875rem;
  --size-10: 0.625rem;
  --size-55: 3.4375rem;
  --size-155: 9.6875rem;
  --size-600: 37.5rem;
  --size-145: 9.0625rem;
  --size-460: 28.75rem;
  --shadow-1: 0 var(--space-4) var(--space-12) var(--shadow-blue);
  --shadow-2: 0 var(--space-24) var(--space-96) var(--shadow-navy);
  --shadow-3: 0 var(--space-4) var(--space-24) var(--shadow-navy);
  --shadow-4: 0 0 var(--space-20) var(--accent-glow);
  --shadow-5: 0 var(--space-8) var(--space-20) calc(-1 * var(--space-4))
    var(--shadow-blue);
  --table-min: 34rem;
  --form-max: 29rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text: #edf3ff;
    --canvas: #0b1220;
    --surface: #131e30;
    --surface-soft: #1e2c43;
    --blue: #0057ff;
    --blue-hover: #0046cf;
    --muted: #bac7dc;
    --line: #3f516b;
    --success-bg: #12382a;
    --success-text: #8de0b5;
    --warning-bg: #3d3014;
    --warning-text: #f5d182;
    --error-bg: #422029;
    --error-text: #ffb4b4;
    --info-text: #b8d4ff;
    --dot-grid: #18253a;
    --focus: #8ac6ff;
    --link: #8ac6ff;
  }
}

/* Public landing template dimensions and gradient. */
:root {
  --landing-gradient: linear-gradient(
    135deg,
    var(--blue) 0%,
    var(--blue-hover) 100%
  );
  --landing-size-1: 0.0625rem;
  --landing-size-2: 0.125rem;
  --landing-size-3: 0.1875rem;
  --landing-size-4: 0.25rem;
  --landing-size-6: 0.375rem;
  --landing-size-7: 0.4375rem;
  --landing-size-8: 0.5rem;
  --landing-size-9: 0.5625rem;
  --landing-size-10: 0.625rem;
  --landing-size-11: 0.6875rem;
  --landing-size-12: 0.75rem;
  --landing-size-14: 0.875rem;
  --landing-size-16: 1rem;
  --landing-size-18: 1.125rem;
  --landing-size-20: 1.25rem;
  --landing-size-22: 1.375rem;
  --landing-size-24: 1.5rem;
  --landing-size-26: 1.625rem;
  --landing-size-28: 1.75rem;
  --landing-size-30: 1.875rem;
  --landing-size-32: 2rem;
  --landing-size-38: 2.375rem;
  --landing-size-40: 2.5rem;
  --landing-size-44: 2.75rem;
  --landing-size-48: 3rem;
  --landing-size-56: 3.5rem;
  --landing-size-60: 3.75rem;
  --landing-size-64: 4rem;
  --landing-size-68: 4.25rem;
  --landing-size-70: 4.375rem;
  --landing-size-72: 4.5rem;
  --landing-size-74: 4.625rem;
  --landing-size-80: 5rem;
  --landing-size-84: 5.25rem;
  --landing-size-90: 5.625rem;
  --landing-size-96: 6rem;
  --landing-size-240: 15rem;
  --landing-size-300: 18.75rem;
  --landing-size-420: 26.25rem;
  --landing-size-500: 31.25rem;
  --landing-size-600: 37.5rem;
  --landing-size-800: 50rem;
  --landing-size-860: 53.75rem;
  --landing-size-900: 56.25rem;
  --landing-size-980: 61.25rem;
  --landing-size-999: 62.4375rem;
  --landing-size-1160: 72.5rem;
}

:root {
  --landing-faq-width: 48.75rem;
  --landing-size-6: 0.375rem;
}

:root {
  --landing-text-gradient: linear-gradient(135deg, var(--link), var(--accent));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --landing-text-gradient: linear-gradient(
      135deg,
      var(--link),
      var(--on-dark-accent)
    );
  }
}

:root { --font-landing: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }

:root {
  --score-green-start: #a7edc6;
  --score-green-end: #2ecc71;
}

:root {
  --feature-blue-bg: #e5efff;
  --feature-blue-line: #bdd5ff;
  --feature-mint-bg: #def8ec;
  --feature-mint-line: #afe4cc;
  --feature-mint-accent: #12805c;
  --feature-purple-bg: #eee5ff;
  --feature-purple-line: #d6c2f5;
  --feature-purple-accent: #7950c4;
  --feature-peach-bg: #ffeddf;
  --feature-peach-line: #f3ceb2;
  --feature-peach-accent: #b95625;
}