:root {
  --navy: #0e346f;
  --navy-strong: #0a2856;
  --navy-deep: #081f45;
  --navy-soft: #1c4a8f;
  --red: #d91313;
  --red-strong: #b30e0e;

  --ink: #14233b;
  --text: #2a3a52;
  --muted: #56647a;
  --paper: #f4f7fb;
  --surface: #fdfeff;
  --tint: #e9f0f8;
  --line: #d9e2ee;
  --line-strong: #c3d0e1;
  --on-navy: #f2f6fc;
  --on-navy-muted: #b9c7dd;
  --on-red: #fffafa;
  --success: #17803d;

  --font-text: "Onest", "Segoe UI", Arial, sans-serif;
  --font-display: "Onest", "Segoe UI", Arial, sans-serif;

  --radius: 12px;
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --radius-pill: var(--radius);

  --shadow-sm: 0 1px 2px rgb(14 52 111 / 6%), 0 6px 16px rgb(14 52 111 / 6%);
  --shadow-md: 0 2px 6px rgb(14 52 111 / 7%), 0 16px 36px rgb(14 52 111 / 11%);
  --shadow-lg: 0 4px 12px rgb(8 31 69 / 10%), 0 28px 64px rgb(8 31 69 / 18%);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-height: 72px;
  --section-space: clamp(40px, 4.5vw, 64px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-press: 140ms;
  --duration-state: 200ms;
  --duration-enter: 600ms;
  --transition: var(--duration-state) ease;

  --color-deep-blue: var(--navy);
  --color-deep-blue-light: var(--navy-soft);
  --color-turquoise: var(--navy-soft);
  --color-turquoise-dark: var(--navy);
  --color-sand: var(--tint);
  --color-sand-light: var(--paper);
  --color-coral: var(--red);
  --color-coral-dark: var(--red-strong);
  --color-white: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-success: var(--success);
  --color-lime: var(--red);
  --color-lime-hover: var(--red-strong);
  --color-yellow: var(--red);
  --color-yellow-hover: var(--red-strong);
  --color-footer: var(--navy-deep);
}