@layer theme {
  :root,
  :root:not([data-theme]) {
    color-scheme: light;

    --font-sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;

    --container-md: 82rem;
    --gutter: clamp(1.25rem, 4vw, 4rem);

    --h1: clamp(3.25rem, 7.4vw, 7.25rem);
    --h2: clamp(2.35rem, 4.5vw, 4.9rem);
    --h3: clamp(1.35rem, 1.6vw, 1.7rem);

    --radius-2: 0.5rem;
    --radius-3: 0.75rem;
    --radius-4: 1.25rem;

    --shadow-color: 205 46% 13%;

    --color-bg: #f3f5f3;
    --color-surface: #ffffff;
    --color-surface-2: #e8edef;
    --color-text: #0b2639;
    --color-muted: #526979;
    --color-border: #c8d4d8;

    --color-primary: #126889;
    --color-primary-hover: #0a4d6c;
    --color-on-primary: #ffffff;
    --color-primary-soft: #dcecf1;

    --color-danger: #ae382f;
    --color-danger-hover: #8c2923;
    --color-on-danger: #ffffff;
    --color-danger-soft: #f7e2df;

    --color-focus: #00a5cd;
    --color-link: #126889;
    --color-link-hover: #0a4d6c;
    --overlay: hsl(203 62% 9% / 0.72);

    --lvp-ink: #0b2639;
    --lvp-navy: #092c43;
    --lvp-navy-deep: #061f31;
    --lvp-blue: #126889;
    --lvp-blue-bright: #28a1c2;
    --lvp-blue-pale: #cde4eb;
    --lvp-silver: #aebdc3;
    --lvp-paper: #f3f5f3;
    --lvp-paper-warm: #eceeeb;
    --lvp-white: #ffffff;
    --lvp-rule: hsl(198 18% 75% / 0.72);
    --lvp-grid: hsl(199 34% 31% / 0.075);
    --lvp-grid-strong: hsl(199 34% 31% / 0.13);
    --lvp-panel: hsl(0 0% 100% / 0.72);
    --lvp-shadow-soft: 0 1.5rem 4rem hsl(var(--shadow-color) / 0.1);
    --lvp-shadow-card: 0 1rem 2.8rem hsl(var(--shadow-color) / 0.09);
  }
}