/* ******************************************
   variables.css
   色、フォント、余白などの変数
****************************************** */
:root {

  /* === 共通色 === */
  --color-text: #333333;          /* 標準テキストカラー */
  --color-heading: #1a1a1a;       /* 見出し基本色（使わないかもだけど一応） */
  --color-white: #ffffff;         /* 基本の白 */
  --color-border: #dddddd;        /* 枠線・区切り線用 */
  --color-background: #f9f9f9;    /* 全体背景・サブ背景用 */
  --color-dark-bg: #666666;       /* 白文字が映える濃いグレー */
  --color-dark-bg-light: #777777; /* 控えめなグレー背景、補足情報などに */
  --color-primary-text: #3f7043; /* メインで使う緑系テキスト色 */

  /* === Header (グローバル共通ヘッダー) === */
  --header-nav-toggle-bar:  #3f7e65;  /* トグルボタン */
  --header-logo-color:      #599956;  /* サイトタイトルロゴ色 */
  --logo-bg-gradient: linear-gradient(to bottom, #e7eff3, #dfe7eb);/* 左：ロゴ側の背景（水色グラデ） */
  --nav-bg-gradient: linear-gradient(to bottom, #3f5e49, #364e3f);/* 右：ナビ全体の背景（深緑グラデ） */
  --nav-bg-gradient-contact: linear-gradient(to bottom, #353134, #2d2a2c, #262427);/* お問い合わせ背景（ダークグレー） */

  /* === Footer (グローバル共通フッター) === */
  --footer-nav-bg-gradient: linear-gradient(to bottom,
    #3a7e59 0%,
    #5bbf72 70%,
    #a7e379 100%
  );
  --footer-bottom-bg-color: #444444;

  /* === Section Header (H2見出し周り) === */
  --section-header-bg-gradient: linear-gradient( to right,
    #b9cf7c 0%,
    #64b676 25%,
    #5fb773 50%,
    #64b676 75%,
    #b9cf7c 100%
  );
  --section-header-bg-light: linear-gradient( to right,
    #eaf4e2 0%,   /* 薄ミントグリーン */
    #dcecd3 50%,  /* 淡い若草色 */
    #eaf4e2 100%  /* 薄ミントグリーンに戻す */
  );

  /* === Pagination === */
  --pagination--bg: #cccccc;
  --pagination--bg--hover: #eeeeee;
  --pagination--border: #e0e0e0;

  /* === Page Header (ページ固有のヘッダー部分) === */
  --page-header-overlay: rgba(56, 110, 100, 0.8); /* ヘッダー画像上にかぶせる半透明グリーン */
  --page-header-title-color: #ffffff;             /* H1タイトル（白抜き） */
  --page-subheader-bg-gradient: linear-gradient(to right, #b0cc95 0%, #599956 50%, #b0cc95 100%); /* サブタイトル背景グラデ */

  /* === Post Elements (投稿要素のカラー設定) === */
  --post-date-color: #3f9240;         /* 投稿日付の文字色 */
  --post-title-color: #1a1a1a;        /* 投稿タイトルの文字色 */
  --post-category-color: #4d7e3e;     /* カテゴリ名やタグの文字色 */
  --post-meta-color: #666666;         /* メタ情報全般（著者名・時間など） */
  --post-widget-accent:#3c8c3c;

  /* === Toppage Hero Section ("名古屋大学全学同窓会東三河支部とは") === */
  --hero-title-color: #205c3b;
  --hero-bg-gradient: linear-gradient(to bottom, #d9e9cf 0%, #ffffff 100%);

  /* === Toppage お知らせ Section === */
  --section-topics-title-color: #a9c85b; /* 投稿タイトルの黄緑テキスト */

  /* === 企業一覧　member-list === */
  --sponsor-icon-color: #3c8c3c; /* 左端の■アイコンカラー */

  /* === Buttons === */
  --button-submit-bg: #4caf50;               /* お問い合わせ画面の送信ボタン背景色 */
  --button-submit-bg-hover: #43a047;         /* お問い合わせ画面の送信ボタン背景色 */
  --button-top-bg: rgba(211, 235, 229, 0.8); /* ぺージトップに戻るボタン背景 */
  --button-top-bg-hover: #d3ebe5;            /* ぺージトップに戻るボタン背景ホバー */
  --button-top-arrow-color: #3f7043;         /* ぺージトップに戻るボタン内矢印の色 */
  --button-back-bg: linear-gradient(145deg, #4b6e59, #6e9574);     /* 一覧HOMEへ戻るボタン背景 */
  --button-back-bg-hover:linear-gradient(145deg, #3e5c48, #5c8267);/* 一覧HOMEへ戻るホバー */

  /* === Font Family ===　最初の2つはMac対応 */
  --font-family-base: 
    -apple-system, BlinkMacSystemFont, 
    "Segoe UI", 
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", 
    "Yu Gothic", "メイリオ", Meiryo, 
    sans-serif;

  --font-family-heading:
    "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3",
    "Yu Mincho", "游明朝", "MS PMincho", 
    serif;


  /* === Font Size === 15を基準にすると0.95remが14.25*/
  --font-size-base: 1rem;        /* =16px */
  --font-size-small: 0.875rem;   /* =14px */
  --font-size-large: 1.125rem;   /* =18px */

  /* === Font Size（画面幅によって大きくなる）=== */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.5vw, 0.875rem); /* 約12〜14px：補足・注釈用 */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);    /* 約14〜16px：小さめ本文など */
  --font-size-md: clamp(1rem, 0.9rem + 0.7vw, 1.125rem);     /* 約16〜18px：基本本文サイズ */
  --font-size-lg: clamp(1.125rem, 1rem + 1vw, 1.5rem);       /* 約18〜24px：小見出しなど */
  --font-size-xl: clamp(1.5rem, 1.3rem + 1.5vw, 2.25rem);    /* 約24〜36px：大見出し・キャッチ系 */
  --font-size-header-title: clamp(1.4rem, 1rem + 1.3vw, 2rem); /* ：ヘッダタイトル */

  /* === Letter Spacing === */
  --ls-tight: -0.01em;   /* 詰め気味（欧文や大見出し向け） */
  --ls-normal: 0em;      /* デフォルト */
  --ls-wide: 0.03em;     /* やや広め（見やすい日本語向け） */
  --ls-wider: 0.05em;    /* 広め（本文や読み物系） */
  --ls-loose: 0.08em;    /* 大きく広げたいとき（目立たせ用） */

  /* === Line Height === */
  --line-height-tight: 1.3;   /* 見出し用など詰め気味 */
  --line-height-base: 1.6;    /* 本文の基本 */
  --line-height-loose: 1.8;   /* ゆったりした感じにしたいとき */

  /* === Spacing（余白サイズ／マージン・パディング共通）=== */
  --space-xxs: 0.25rem;  /* 4px：超・超小さい */
  --space-xs:  0.5rem;   /* 8px：超小さい */
  --space-sm:  1rem;     /* 16px：小さい（基本） */
  --space-md:  1.5rem;   /* 24px：やや大きい */
  --space-lg:  2rem;     /* 32px：大きめの余白 */
  --space-xl:  3rem;     /* 48px：セクション間など広い余白に */
  --space-xxl: 4rem;     /* 64px：ヒーローエリアなど特大用 */

  /* === Layout（レイアウト関連）=== */
  --container-narrow: 750px;
  --container-medium: 960px;
  --container-max-width: 1140px;  /* コンテンツ最大幅 */

  /* === Border / Radius === */
  --border-width: 1px;        /* 標準ボーダー */
  --border-radius-sm: 4px;    /* 角丸小 */
  --border-radius-md: 8px;    /* 標準角丸 */
  --border-radius-lg: 16px;   /* 大きい角丸 */

  /* === Z-index（重なり順）=== */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* === Transition（アニメーション時間）=== */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

}