/* =====================================================================
   デザイントークン
   Figma: RNu5LGOPoLjkdRDrOWwJcN / セクション 2175:431
   ここの値はFigmaのVariablesと1対1で対応させる。個別のCSSに生の値を書かない。
   ===================================================================== */

:root {
  /* ---- 色 ---- */
  --color-primary: #c3d5e2;      /* ロゴ・装飾文字 */
  --color-text: #4d4d4d;         /* 見出し・カードのタイトルなど */
  --color-text-body: #3f3f3f;    /* 記事本文（長文なので少し濃い） */
  --color-text-gray: #888888;    /* 日付・地域ラベル */
  --color-text-muted: #666666;   /* タグライン・コピーライト */
  --color-pupil: #373737;        /* 目の黒目（ロゴ・見出し） */
  --color-line: #dddddd;         /* 罫線・非選択のインジケーター */
  --color-white: #ffffff;
  --color-bg: #fcfcfc;           /* ページ背景 */
  --color-bg-footer: #f2f2f2;    /* フッター・メニュー背景 */
  --color-bg-subtle: #f7f7f7;    /* 施設情報の箱・絞り込みチップの× */
  --color-tag-category: #d29e45; /* カテゴリタグ */
  --color-tag-default: #4d4d4d;  /* 大陸が特定できないときの国タグ */

  /* ---- 大陸カラー ----
     記事カードの国タグの背景色。色を変えるときはここだけを直す。
     PHP側は大陸のスラッグを data-region に出すだけで、色は持たない。 */
  --color-region-asia: #16a34a;
  --color-region-europe: #157cb8;
  --color-region-north-america: #e04343;
  --color-region-south-america: #ed6e15;
  --color-region-africa: #4d4d4d;

  /* ---- 書体 ---- */
  /* 日本語は Adobe Fonts（平成角ゴシック W5 = weight 500 / 700）。
     読み込み失敗時に字面が大きく崩れないよう、同じ角ゴシック系でフォールバックする。 */
  --font-jp: "heisei-kaku-gothic-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Noto Sans JP", "Yu Gothic", sans-serif;
  /* 欧文の本文・リンク・日付 */
  --font-en: "Roboto", var(--font-jp);
  /* 記事本文の段落。端末に最初から入っている書体（システムフォント）を
     游ゴシック → ヒラギノ → メイリオ の順で使う。
     最後の sans-serif は Android（Noto Sans）など、どれも無い端末の受け皿。 */
  --font-body: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* 英字見出し（COUNTRY / INSTAGRAM など） */
  --font-display: "Krona One", var(--font-jp);
  /* ロゴと同じ書体。セクション見出しの「目つき」の文字と、PICKUPの番号に使う */
  --font-logo: "Alien Block", var(--font-display);

  /* ---- 文字サイズ ---- */
  --fs-2xs: 12px;  /* SPのタグライン・Instagram */
  --fs-xs: 13px;   /* タグ・タグライン・コピーライト */
  --fs-sm: 14px;   /* リンク・日付・MENU */
  --fs-base: 16px; /* セクション見出しの日本語ラベル・SPの記事タイトル */
  --fs-md: 18px;   /* カードタイトル */
  --fs-lg: 20px;   /* リンク一覧の見出し・PICKUPタイトル */
  --fs-xl: 24px;   /* PICKUPの番号・SPのセクション見出し */
  --fs-2xl: 32px;  /* セクション見出し */

  /* ---- 字間 ---- */
  --ls-tight: 0.02em;
  --ls-wide: 0.04em;

  /* ---- 行間 ---- */
  --lh-none: 1;
  --lh-title: 1.5;
  --lh-body: 1.6;
  --lh-loose: 1.8;

  /* ---- 余白 ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---- レイアウト ---- */
  --page-max: 1440px;         /* デザインの基準幅 */
  --content-max: 1280px;      /* ヘッダー・フッター：1440 - 左右80px */
  --page-gutter: 80px;        /* ヘッダー・フッターの左右余白 */
  --page-gutter-wide: 120px;  /* TOPの各セクションの左右余白 */
  --radius: 2px;             /* 画像・タグ */
  --radius-button: 4px;      /* 一覧をみる などのボタン */
  --tag-h: 28px;             /* 国・カテゴリタグの高さ */

  /* ---- 動き ---- */
  --duration: 0.3s;
  --duration-slow: 0.6s;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --hover-opacity: 0.6;

  /* ---- 重なり順 ---- */
  --z-header: 100;
  --z-menu: 200;
  --z-opening: 300;
  --z-vehicle: 400;
  --z-skip-link: 300;
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 20px;
    --page-gutter-wide: 20px;
  }
}