/*
  デザイン全体で利用するトークンとリセット。
  色・角丸・影・フォントなど、見た目の基準値は全てここで管理する。
*/

:root {
  --bg-start: #f7f8fb;
  --bg-end: #eef2f7;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #e5eaf0;
  --line-soft: #eef2f7;
  --ink: #0b1220;
  --text: #4b5563;
  --muted: #74809a;
  --label: #94a3b8;
  --blue: #2563eb;
  --green: #16a34a;
  --amber: #f59e0b;
  --red: #dc2626;
  --white: #fff;
  --shadow-card: 0 8px 16px rgba(11, 18, 32, 0.06);
  --radius-card: 24px;
  --radius-row: 18px;
  --radius-btn: 22px;
  --radius-pill: 9999px;
  --page-width: 390px;
  --font-ui:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
}

/* ベースリセット */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/* 全体背景と標準フォント */
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(135deg, var(--bg-start), var(--bg-end));
}

/* メディア要素のはみ出し防止 */
img,
svg {
  display: block;
  max-width: 100%;
}

/* フォーム要素のフォント統一 */
button,
input {
  font: inherit;
}

/* リンクの初期見た目を共通化 */
a {
  color: inherit;
  text-decoration: none;
}