:root {
  --color-navy-950: #006fb1;
  --color-navy-900: #0877b4;
  --color-navy-800: #38a8d0;
  --color-navy-700: #78cfe8;
  --color-brand-blue: #004795;
  --color-brand-red: #e6182d;
  --color-brand-yellow: #f8be2e;
  --color-orange-600: #ff7a2f;
  --color-orange-500: #f45b16;
  --color-orange-400: #ff9657;
  --color-sky-500: #18a4d5;
  --color-sky-300: #7dd8ef;
  --color-sky-100: #ddf4fb;
  --color-sky-50: #f2fbfe;
  --color-cyan-400: #43c4cf;
  --color-ink: #24373e;
  --color-action-ink: #18313a;
  --color-slate: #526d79;
  --color-line: #beddea;
  --color-off-white: #f7fafa;
  --color-paper: #ffffff;
  --color-white: #ffffff;
  --color-success: #2e8064;
  --color-warning: var(--color-brand-yellow);
  --color-error: var(--color-brand-red);

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-numeric: "Barlow", "Noto Sans JP", sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 600ms;
  --duration-hero: 900ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  --navy: var(--color-navy-900);
  --navy-soft: var(--color-navy-800);
  --cream: var(--color-off-white);
  --paper: var(--color-paper);
  --ink: var(--color-ink);
  --muted-ink: var(--color-slate);
  --line: rgba(8, 119, 180, 0.22);
  --line-dark: rgba(8, 119, 180, 0.78);
  --white: var(--color-white);
  --white-soft: rgba(255, 255, 255, 0.78);
  --accent: var(--color-orange-600);
  --accent-strong: var(--color-orange-600);
  --serif: var(--font-jp);
  --sans: var(--font-jp);
  --mono: var(--font-mono);
  --header-h: 76px;
}

body {
  font-family: var(--font-jp);
}

[data-audit-numeric] {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-sky-300);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}