:root {
  --bg: #ffffff;
  --ink: #141824;
  --muted: #5a6170;
  --red: #ec423c;
  --red-deep: #c92f2a;
  --blue: #002fa7;
  --wash: #f7f6f3;
  --line: #eaeaea;
  --btn: #141824;
  --btn-hover: #2a2f3a;
  --on-btn: #ffffff;
  --hero: #0b0d12;

  --ff-display: "Onest", "Helvetica Neue", sans-serif;
  --ff-body: "Manrope", "Helvetica Neue", sans-serif;

  --container: 87.5rem;
  --pad: 1.25rem;
  --header-h: 5.25rem;
  --radius: 4px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-ui: 200ms;
  --t-modal: 300ms;
  --t-hero: 1100ms;
  --motion-reveal: 1000ms;
  --motion-soft: 500ms;
  --ease-reveal: cubic-bezier(0.23, 1, 0.32, 1);

  --z-nav: 200;
  --z-dropdown: 220;
  --z-drawer: 300;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@media (min-width: 768px) {
  :root { --pad: 2rem; }
}

@media (min-width: 1280px) {
  :root { --pad: 3rem; }
}