/* このファイルは scripts/build_tokens_css.py が生成する。
   直接編集しないこと。値の出典は data/design/tokens.json のみ。 */

:root {

  /* Color */
  --color-primary-50: #F0F7F7;
  --color-primary-100: #D6EAEA;
  --color-primary-300: #7FBDBD;
  --color-primary-500: #2E7D7D;
  --color-primary-600: #256868;
  --color-primary-700: #1C4F4F;
  --color-primary-900: #123434;
  --color-bg: #FFFFFF;
  --color-surface: #F7F8F8;
  --color-surface-alt: #EDEFEF;
  --color-border: #DCDFDF;
  --color-border-strong: #B9BEBE;
  --color-text: #1A1D1D;
  --color-text-secondary: #5A6060;
  --color-text-muted: #6D7373;
  --color-text-inverse: #FFFFFF;
  --color-success: #2F7A3E;
  --color-success-bg: #EFF6F0;
  --color-warning: #8A6100;
  --color-warning-bg: #FBF5E8;
  --color-error: #A32B2B;
  --color-error-bg: #FBF0F0;
  --color-info: #2E5E8A;
  --color-info-bg: #EFF4F9;
  --color-info-border: #CBDCEC;
  --color-success-border: #CFE3D4;
  --color-warning-border: #EADFC2;
  --color-error-border: #EDCFCF;
  --color-undisclosed: #6B4E9E;
  --color-undisclosed-bg: #F4F1F9;
  --color-not-applicable: #6D7373;
  --color-free: #2F7A3E;
  --color-incomparable: #8A6100;
  --color-undisclosed-border: #DED6EC;
  --color-conditional: #1F6E6E;
  --color-conditional-bg: #EDF6F5;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --font-size-display: 28px;
  --font-size-display-desktop: 36px;
  --font-weight-display: 700;
  --line-height-display: 1.3;
  --letter-spacing-display: -0.01em;
  --font-size-h1: 24px;
  --font-size-h1-desktop: 30px;
  --font-weight-h1: 700;
  --line-height-h1: 1.4;
  --letter-spacing-h1: -0.01em;
  --font-size-h2: 20px;
  --font-size-h2-desktop: 24px;
  --font-weight-h2: 700;
  --line-height-h2: 1.45;
  --letter-spacing-h2: 0;
  --font-size-h3: 17px;
  --font-size-h3-desktop: 19px;
  --font-weight-h3: 700;
  --line-height-h3: 1.5;
  --letter-spacing-h3: 0;
  --font-size-h4: 16px;
  --font-size-h4-desktop: 17px;
  --font-weight-h4: 700;
  --line-height-h4: 1.5;
  --letter-spacing-h4: 0;
  --font-size-body: 16px;
  --font-size-body-desktop: 17px;
  --font-weight-body: 400;
  --line-height-body: 1.85;
  --letter-spacing-body: 0.01em;
  --font-size-body-sm: 15px;
  --font-size-body-sm-desktop: 15px;
  --font-weight-body-sm: 400;
  --line-height-body-sm: 1.75;
  --letter-spacing-body-sm: 0.01em;
  --font-size-small: 13px;
  --font-size-small-desktop: 13px;
  --font-weight-small: 400;
  --line-height-small: 1.6;
  --letter-spacing-small: 0.02em;
  --font-size-caption: 12px;
  --font-size-caption-desktop: 12px;
  --font-weight-caption: 400;
  --line-height-caption: 1.5;
  --letter-spacing-caption: 0.02em;
  --font-size-button: 16px;
  --font-size-button-desktop: 16px;
  --font-weight-button: 700;
  --line-height-button: 1.4;
  --letter-spacing-button: 0.02em;
  --font-size-table: 14px;
  --font-size-table-desktop: 15px;
  --font-weight-table: 400;
  --line-height-table: 1.6;
  --letter-spacing-table: 0;
  --font-size-table-num: 15px;
  --font-size-table-num-desktop: 16px;
  --font-weight-table-num: 600;
  --line-height-table-num: 1.5;
  --letter-spacing-table-num: 0;
  --font-numeric-table-num: tabular-nums;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Border */
  --border-width: 1px;
  --border-width-accent: 3px;
  --border-width-emphasis: 4px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(26,29,29,.06);
  --shadow-md: 0 2px 8px rgba(26,29,29,.08);
  --shadow-lg: 0 8px 24px rgba(26,29,29,.12);

  /* Breakpoint（メディアクエリでは変数を使えないため参照用） */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  /* Layout */
  --layout-max-content-width: 1120px;
  --layout-article-width: 680px;
  --layout-wide-content-width: 900px;
  --layout-gutter-mobile: 16px;
  --layout-gutter-tablet: 24px;
  --layout-column-gap: 24px;
  --layout-header-height: 56px;
  --layout-header-height-desktop: 64px;

  /* Z-index */
  --z-base: 0;
  --z-sticky-th: 10;
  --z-header: 100;
  --z-toc: 110;
  --z-modal: 1000;

  /* Motion */
  --motion-duration: 200ms;
  --motion-easing: cubic-bezier(.2,0,.2,1);

  /* Touch target */
  --touch-min-target-cta: 48px;
  --touch-min-target-nav: 44px;
}

/* 動きの抑制。!important を使わず、変数の上書きで無効化する。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.01ms;
  }
}