@charset "utf-8";

:root {
  --df-color-primary: #1c1c1a;
  --df-color-primary-hover: #191918;
  --df-color-surface: #f3f4f6;
  --df-color-bg: #ffffff;
  --df-color-accent: #932e44;
  --df-color-accent-hover: #84293e;
  --df-color-text: #333333;
  --df-color-muted: #838383;
  --df-color-line: #e5e5e5;
  --df-color-input-line: #cccccc;
  --df-color-error: #932e44;
  --df-color-success: #333333;
  --df-color-on-primary: #ffffff;

  --df-font-sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --df-font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --df-font-size-body: 14px;
  --df-font-size-caption: 12px;
  --df-line-height-body: 1.9;
  --df-letter-spacing-body: 0.04em;
  --df-line-height-heading: 1.5;
  --df-letter-spacing-heading: 0.05em;

  --df-content-max: 1160px;
  --df-page-padding: 20px;
  --df-grid-gap: 32px;
  --df-section-space: 48px;
  --df-section-space-compact: 40px;
  --df-radius: 8px;
  --df-radius-panel: 16px;
  --df-shadow-panel: 0 16px 40px rgba(28, 28, 26, 0.1);
  --df-transition-duration: 240ms;
  --df-transition-easing: ease-out;
}

@media (min-width: 769px) {
  :root {
    --df-page-padding: 40px;
    --df-font-size-body: 15px;
    --df-font-size-caption: 12px;
    --df-section-space: 80px;
    --df-section-space-compact: 56px;
  }
}

@media (min-width: 1025px) {
  :root {
    --df-page-padding: 64px;
    --df-font-size-body: 16px;
    --df-font-size-caption: 13px;
  }
}