/* Synced copy of design-system/tokens.css (source of truth: design-system/tokens.json). Keep values identical. */
:root {
  /* Brand */
  --km-color-orange: #f2711c;
  --km-color-navy: #1b2b4b;
  --km-color-light-blue: #eaf4fc;

  /* Interactive */
  --km-color-primary: #c94f0b;
  --km-color-primary-hover: #b84608;
  --km-color-primary-pressed: #9f3b05;
  --km-color-focus: #c94f0b;
  --km-color-link: #174f86;
  --km-color-link-hover: #103a64;

  /* Text and surfaces */
  --km-color-text-strong: #1a1a1a;
  --km-color-text: #263241;
  --km-color-muted: #596575;
  --km-color-white: #ffffff;
  --km-color-on-orange: #1a1a1a;
  --km-color-surface: #ffffff;
  --km-color-surface-subtle: #f5f8fa;
  --km-color-surface-info: #eaf4fc;
  --km-color-surface-inverse: #1b2b4b;
  --km-color-surface-disabled: #eef2f6;
  --km-color-border: #d9e1e8;
  --km-color-border-strong: #9ba8b6;
  --km-color-border-inverse: #657590;
  --km-color-error: #b42318;
  --km-color-error-surface: #fef3f2;
  --km-color-success: #18794e;
  --km-color-success-surface: #ecfdf3;
  --km-color-warning: #8a4b08;
  --km-color-warning-surface: #fff7e8;

  /* Typography */
  --km-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --km-weight-regular: 400;
  --km-weight-medium: 500;
  --km-weight-semibold: 600;
  --km-weight-bold: 700;
  --km-weight-extra-bold: 800;
  --km-text-display: 64px;
  --km-text-h1: 56px;
  --km-text-h2: 40px;
  --km-text-h3: 24px;
  --km-text-h4: 20px;
  --km-text-body-lg: 18px;
  --km-text-body: 16px;
  --km-text-small: 14px;
  --km-text-caption: 12px;
  --km-text-button: 16px;
  --km-leading-display: 1.25;
  --km-leading-h1: 1.3;
  --km-leading-heading: 1.45;
  --km-leading-body: 1.8;
  --km-leading-small: 1.6;
  --km-letter-spacing: 0;

  /* Spacing */
  --km-space-0: 0;
  --km-space-1: 4px;
  --km-space-2: 8px;
  --km-space-3: 12px;
  --km-space-4: 16px;
  --km-space-5: 20px;
  --km-space-6: 24px;
  --km-space-8: 32px;
  --km-space-10: 40px;
  --km-space-12: 48px;
  --km-space-16: 64px;
  --km-space-20: 80px;
  --km-space-24: 96px;
  --km-space-28: 112px;

  /* Shape and elevation */
  --km-radius-none: 0;
  --km-radius-sm: 4px;
  --km-radius-md: 8px;
  --km-radius-round: 50%;
  --km-shadow-subtle: 0 4px 16px rgba(27, 43, 75, 0.08);
  --km-shadow-raised: 0 8px 24px rgba(27, 43, 75, 0.12);
  --km-shadow-drawer: -6px 0 24px rgba(27, 43, 75, 0.18);
  --km-shadow-focus: 0 0 0 3px rgba(201, 79, 11, 0.28);

  /* Layout */
  --km-container: 1200px;
  --km-container-narrow: 880px;
  --km-container-article: 760px;
  --km-gutter: 24px;
  --km-section-space: 96px;

  /* Motion */
  --km-motion-fast: 120ms;
  --km-motion-default: 180ms;
  --km-motion-drawer: 240ms;
  --km-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --km-motion-distance-sm: 2px;
}

@media (max-width: 781px) {
  :root {
    --km-text-display: 40px;
    --km-text-h1: 36px;
    --km-text-h2: 28px;
    --km-text-h3: 22px;
    --km-text-h4: 18px;
    --km-text-body-lg: 16px;
    --km-text-body: 15px;
    --km-text-small: 13px;
    --km-text-button: 15px;
    --km-leading-display: 1.3;
    --km-leading-h1: 1.35;
    --km-gutter: 20px;
    --km-section-space: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --km-motion-fast: 0.01ms;
    --km-motion-default: 0.01ms;
    --km-motion-drawer: 0.01ms;
    --km-motion-distance-sm: 0;
  }
}