/* ==========================
   カラーに関する設定
========================== */

:root {
  --color-bg-base: #E8E8E8;
  --color-bg-card: rgba(255, 255, 255, 0.7);
  --color-text-primary: #333333;
  --color-text-secondary:#989898;
  --color-accent: #F5F846;
}

/* ==========================
   背景に関する設定
========================== */

.grid-32 {
  background-color: var(--color-text-secondary);
  background-image:
    linear-gradient(#ffffff 1px, transparent 1px),
    linear-gradient(90deg, #ffffff 1px, transparent 1px);
  background-size: 32px 32px;
}


/* ==========================
   フォントに関する設定
========================== */
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

/* ==========================
   フォントサイズに関する設定
========================== */

:root {
  --font-size-mini:14.22px;
  --font-size-body: 16px;
  --font-size-caption: 18.29px;
  --font-size-meta: 21.33px;
  --font-size-lead: 25.6px;
  --font-size-heading-sm: 32px;
  --font-size-heading-md: 42.667px;
  --font-size-heading-lg: 64px;
  --font-size-heading-xl: 96px;
}

@media (max-width: 769px) {
  :root {
    --font-size-mini:14.22px;
  --font-size-body: 16px;
  --font-size-caption: 18.29px;
  --font-size-meta: 18.29px;
  --font-size-lead: 21.33px;
  --font-size-heading-sm: 21.33px;
  --font-size-heading-md: 42.667px;
  --font-size-heading-lg: 32px;
  --font-size-heading-xl: 64px;
}
}

@media (max-width: 480px) {/* タイトルの改行によるレイアウト崩れを防ぐため追加のブレイクポイントを設定 */
  :root {
  --font-size-heading-xl: 42.667px;
}
}

@media (max-width: 376px) {
  :root {
    --font-size-mini:14.22px;
  --font-size-body: 16px;
  --font-size-caption: 18.29px;
  --font-size-meta: 18.29px;
  --font-size-lead: 21.33px;
  --font-size-heading-sm: 21.33px;
  --font-size-heading-md: 32px;
  --font-size-heading-lg: 32px;
  --font-size-heading-xl: 42.667px;
}
}

/* ==========================
   フォントウェイトに関する設定
========================== */

:root {
  /* Font weight */
  --font-weight-regular: 400;   /* 本文・通常テキスト */
  --font-weight-medium: 500;    /* 強調・UIラベル */
  --font-weight-bold: 700;      /* 見出し */
  --font-weight-black: 900;     /* 強い訴求・キービジュアル */
}