/* Arcline design tokens.
   Pages alternate between two kinds of ground: white (with a pale blue tint for alternate sections) and deep
   navy for the header, hero, feature bands, and footer. Blue is the logo's line and marks links and figures.
   Green is the one thing to press. */

:root {
  color-scheme: light;

  --paper: #ffffff;
  --surface: #ffffff;
  --sunken: #f1f5fb;
  --ink: #0a1c40;
  --text: #42516c;
  --muted: #66758f;
  --line: #dce4f0;
  --rule: #c2cee0;

  --signal: #1a56db;
  --signal-hover: #1647b8;
  --signal-text: #1a56db;
  --signal-soft: #e9f0ff;
  --on-signal: #ffffff;
  --logo-line: #1a56db;
  --accent: #2fd27f;
  --accent-hover: #4be093;
  --on-accent: #04281a;
  --positive: #0f8a5a;
  --positive-soft: #e3f6ec;
  --caution: #8a5200;
  --caution-soft: #fff3d9;
  --danger: #c0352b;
  --danger-soft: #fdecea;

  --panel: #ffffff;
  --shadow: 0 1px 2px rgb(10 28 64 / 5%), 0 14px 36px -16px rgb(10 28 64 / 20%);
  --glow: rgb(26 86 219 / 18%);

  /* Navy ground, and the diagonal sweeps of light that cross it. */
  --navy: linear-gradient(120deg, #05122c 0%, #081d4a 55%, #0b2f73 100%);
  --navy-solid: #06142f;
  --sweep:
    linear-gradient(118deg, transparent 0 56%, rgb(70 130 255 / 13%) 56% 72%, transparent 72%),
    linear-gradient(118deg, transparent 0 72%, rgb(70 130 255 / 10%) 72% 100%);
  --header: #05122c;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 8px;
  --radius-lg: 16px;
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
}

/* Navy ground. These parts of the page are always dark, and with the header toggle the whole page is.
   Anything placed inside picks up the dark palette. */
:root[data-theme="dark"],
.site-header,
.hero,
.page-header,
.band,
.plan--featured,
.report-feature,
.cta__inner,
.site-footer {
  color-scheme: dark;

  --paper: #06142f;
  --surface: #0c2150;
  --sunken: #04102a;
  --ink: #ffffff;
  --text: #bcc9e0;
  --muted: #8898b6;
  --line: rgb(255 255 255 / 12%);
  --rule: rgb(255 255 255 / 24%);

  --signal: #2f6bf0;
  --signal-hover: #4a80f5;
  --signal-text: #86b3ff;
  --signal-soft: rgb(96 146 255 / 16%);
  --logo-line: #5b8dff;
  --positive: #3ddc84;
  --positive-soft: rgb(61 220 132 / 14%);
  --caution: #f5bd5b;
  --caution-soft: rgb(245 189 91 / 14%);
  --danger: #ff8078;
  --danger-soft: rgb(255 128 120 / 15%);

  --panel: #0c2150;
  --shadow: none;
  --glow: rgb(80 140 255 / 30%);

  color: var(--text);
}