@charset "utf-8";

/* DESIGN.mdで決めた役割に合わせ、案件ごとに値を確定する。 */
:root {
  /* Color roles */
  --df-color-bg: #ffffff;
  --df-color-surface: #f6f7f8;
  --df-color-surface-strong: #e9edf1;
  --df-color-text: #1f2933;
  --df-color-muted: #52606d;
  --df-color-line: #d9e2ec;
  --df-color-primary: #175cd3;
  --df-color-primary-hover: #004e9f;
  --df-color-on-primary: #ffffff;

  /* Typography roles */
  --df-font-sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --df-font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --df-font-body: var(--df-font-sans);
  --df-font-heading: var(--df-font-sans);
  --df-font-display: var(--df-font-heading);
  --df-font-size-display: clamp(40px, 7vw, 96px);
  --df-font-size-h1: clamp(32px, 5vw, 64px);
  --df-font-size-h2: clamp(26px, 3vw, 40px);
  --df-font-size-h3: clamp(20px, 2vw, 28px);
  --df-font-size-body: 16px;
  --df-font-size-caption: 14px;
  --df-font-weight-heading: 600;
  --df-line-height-heading: 1.35;
  --df-line-height-body: 1.8;
  --df-letter-spacing-heading: 0;
  --df-letter-spacing-body: 0;

  /* Layout and spacing roles */
  --df-content-max: 1120px;
  --df-gutter: clamp(20px, 4vw, 48px);
  --df-space-xs: 8px;
  --df-space-sm: 16px;
  --df-space-md: 24px;
  --df-space-lg: 40px;
  --df-space-xl: 64px;
  --df-section-space: clamp(64px, 10vw, 120px);
  --df-section-space-compact: clamp(40px, 6vw, 72px);
  --df-card-grid-gap: clamp(16px, 2vw, 32px);

  /* Shape, depth, and motion roles */
  --df-radius: 4px;
  --df-radius-control: var(--df-radius);
  --df-radius-panel: var(--df-radius);
  --df-shadow-card: none;
  --df-shadow-floating: 0 16px 40px rgb(31 41 51 / 12%);
  --df-transition-duration: 180ms;
  --df-transition-easing: ease;
}