/* DESIGN.md のトークンをそのまま CSS 変数にしている。色・サイズの直書きは禁止。 */
:root {
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;
  --color-ink: #1d1d1f;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;
  --color-hairline: #e0e0e0;
  --color-divider-soft: #f0f0f0;
  --color-note: #eef3fa;

  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --type-display-lg: 600 32px/1.3 var(--font-sans);
  --type-display-md: 600 24px/1.4 var(--font-sans);
  --type-tagline: 600 19px/1.4 var(--font-sans);
  --type-lead: 400 19px/1.7 var(--font-sans);
  --type-body: 400 17px/1.7 var(--font-sans);
  --type-caption: 400 14px/1.6 var(--font-sans);
  --type-fine-print: 400 12px/1.5 var(--font-sans);

  --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-xxl: 48px; --space-section: 64px;
  --layout-content: 680px; --layout-wide: 960px;
  --rounded-sm: 8px; --rounded-md: 11px; --rounded-lg: 18px; --rounded-pill: 9999px;
}

* { box-sizing: border-box; }
html { background: var(--color-canvas-parchment); }
body { margin: 0; color: var(--color-ink); font: var(--type-body); -webkit-font-smoothing: antialiased; }

.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xxs) var(--space-sm);
  max-width: var(--layout-content); margin: 0 auto; padding: var(--space-md);
  min-height: 56px;
}
.site-header .brand { font: var(--type-tagline); color: var(--color-ink); text-decoration: none; }
.site-header .tag { font: var(--type-caption); color: var(--color-ink-muted-48); }
.site-header .util { margin-left: auto; font: var(--type-caption); }

main { max-width: var(--layout-content); margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-section); }
.tile-light { background: var(--color-canvas); }
.tile-light main { padding-top: var(--space-section); }

h1 { font: var(--type-display-lg); letter-spacing: -0.3px; margin: 0 0 var(--space-md); }
h2 { font: var(--type-display-md); letter-spacing: -0.2px; margin: var(--space-xxl) 0 var(--space-sm); }
p { margin: 0 0 var(--space-md); }
.lead { font: var(--type-lead); }
ul { padding-left: 1.2em; margin: 0 0 var(--space-md); }
li { margin-bottom: var(--space-xs); }
a { color: var(--color-primary); }
a:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }
.muted { color: var(--color-ink-muted-48); font: var(--type-caption); }

.note { background: var(--color-note); border-radius: var(--rounded-sm); padding: var(--space-sm) var(--space-md); }

table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-md); }
th, td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; border-bottom: 1px solid var(--color-hairline); }
th { font: var(--type-caption); color: var(--color-ink-muted-48); white-space: nowrap; width: 9em; }

.site-footer {
  max-width: var(--layout-content); margin: 0 auto; padding: var(--space-md) var(--space-md) var(--space-xxl);
  border-top: 1px solid var(--color-hairline); font: var(--type-caption); color: var(--color-ink-muted-80);
}
.site-footer a { margin-right: var(--space-md); }

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  main { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
  .tile-light main { padding-top: var(--space-xl); }
}