/* tokens.css — ハッピースペース (歯の専門性+権威感を強化) */
:root {
  --color-bg: #ffffff;
  --color-bg-dark: #0d2137;         /* ダークネイビー (コラム/専門性演出) */
  --color-text: #1a2a3a;
  --color-text-inverse: #f0f4f8;
  --color-text-muted: #5a7089;
  --color-text-muted-inverse: #8fa4b8;
  --color-primary: #2E86C1;         /* やや深いブルー (専門性寄り) */
  --color-primary-dark: #1B4F72;    /* 濃紺 */
  --color-accent: #27AE60;          /* グリーン (口腔ケア=健康のイメージ) */
  --color-accent-warm: #E8A838;     /* 温かみのゴールド (信頼/実績) */
  --color-border: #d6e2ed;
  --color-surface: #F0F6FB;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);

  /* フォント — 見出しにセリフ (権威感) */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: var(--font-display);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: clamp(1.5rem, 3.5vw, 1.875rem);
  --fs-4xl: clamp(1.875rem, 4.5vw, 2.25rem);
  --fs-5xl: clamp(2.25rem, 6vw, 3rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  --container-max: 1120px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(13, 33, 55, 0.06);
  --shadow-md: 0 8px 24px rgba(13, 33, 55, 0.10);
  --shadow-lg: 0 20px 48px rgba(13, 33, 55, 0.14);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}