/* ============================================================
   つくしさんすう — デザイントークン
   ------------------------------------------------------------
   ポータル「つくしひろば」と同じ値。色を増やさないこと。
   （出典: つくしひろば tailwind.config.ts / docs/design-system.md）

   ビルドツール・CDN を使わない方針のため、Tailwind ではなく
   CSS カスタムプロパティで持つ。各教材ページからも読み込める。
   ============================================================ */
:root {
  /* color */
  --cream-50: #fbf8f1;
  --cream-100: #f7f1e6;
  --cream-200: #efe6d2;
  --cream-300: #e6d2b0;
  --tsukushi-100: #f3e4c9;
  --wakaba-50: #f1f5e7;
  --wakaba-100: #e2ebcb;
  --wakaba-200: #c3d496;
  --wakaba-500: #728a3c;
  --wakaba-600: #5a6e2f;
  --anzu-100: #fbe4ce;
  --anzu-400: #f0a05a;
  --anzu-600: #9a5420;
  --kokucha-600: #7a6552;
  --kokucha-700: #5c4433;
  --kokucha-800: #443124;

  /* shape */
  --r-pill: 9999px;
  --r-card: 1.75rem;
  --r-tile: 1.25rem;
  --sh-card: 0 4px 16px -6px rgba(92, 68, 51, 0.18);
  --sh-soft: 0 8px 24px -12px rgba(92, 68, 51, 0.25);

  /* space（8px リズム） */
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s10: 40px;

  /* 丸ゴシック。CDN を使わないため、端末が持つ丸ゴシックに任せる。
     Windows / Android には丸ゴシックが無く、通常のゴシックになる。
     完全に揃えたい場合は woff2 を同梱して @font-face を足す。 */
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic",
    -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--kokucha-700);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* キーボード操作でも位置がわかるように（消さないこと） */
:where(a, button):focus-visible {
  outline: 3px solid var(--anzu-400);
  outline-offset: 2px;
  border-radius: var(--r-tile);
}