/* ============================================================
   OpenEXPO カラー変数
   Design: Tailwind mockup → Portal Base CSS Variables

   【変更履歴】
   - 2026/03/13: ポータルベースデフォルト → OpenEXPO用カラーに変更
   ============================================================ */

:root {
  /* === メインカラー === */
  /* 旧: #9bbf46 (green) → 新: #0bdada (primary teal/cyan) */
  --site-c-main: #0bdada;
  --site-c-main-hue: #0bdada;
  --site-c-main-light: #e0fbfb;

  /* === サブカラー === */
  /* 旧: #f99599 (pink) → 新: #ffb800 (accent yellow) */
  --site-c-sub: #ffb800;

  /* === テキスト・グレー系 === */
  --site-c-black: #0e4c5e; /* deep-teal: ヘッダーボタン等で使用 */
  --site-c-gray: #717171;
  --site-c-silvergray: #c7c7c7;
  --site-c-lightgray: #f9fbfb; /* background-light */
  --site-c-disabledgray: #e9e9e9;

  /* === アクセントカラー === */
  --site-c-blue: #0bdada; /* primary */
  --site-c-red: #ff1464;
  --site-c-orange: #ffb800; /* accent-yellow */
  --site-c-green: #0e4c5e; /* deep-teal */

  /* === 背景色 === */
  --site-bg-c: #fff;
  --site-bg-c-sub: #f9fbfb; /* background-light */
  --site-bg-c-underlayer: #eef9f9; /* section-gray */
  --site-bg-c-ribbon: #e0fbfb; /* primary-50 */

  /* === ボーダー === */
  --site-border-c: #e1e1e1;

  /* === フォントカラー === */
  --font-c: #333;
  --font-c-link: #0e4c5e; /* deep-teal */

  /* === マーカー・カラム === */
  --marker-c: #fff696;
  --column-c-main: #0bdada;

  /* === パンくず === */
  --bc-bg-c: #eef9f9;
  --bc-bg-c-sp: #fff;

  /* === ヘッダー === */
  --header-height: 96px;

  /* === フッター === */
  --footer-border: rgba(255,255,255,0.2);

  /* === ボタン === */
  --site-btn-height: 48px;
  --site-btn-small-height: 40px;

  /* === フォーム === */
  --site-input-height: 48px;
  --site-input-border-c: #d1d1d1;
  --site-input-gap: 8px;
  --site-input-error-height: 17px;

  /* === コンテナ === */
  --site-container-width: 1360px;
  --site-container-padding: 80px;

  /* === OpenEXPO専用変数 === */
  --oe-deep-teal: #0e4c5e;
  --oe-primary: #0bdada;
  --oe-primary-dark: #00a0a0;
  --oe-accent-yellow: #ffb800;
  --oe-section-gray: #eef9f9;
  --oe-bg-light: #f9fbfb;
  --oe-card-shadow: 0 4px 20px rgba(14, 76, 94, 0.08);
  --oe-card-shadow-hover: 0 10px 25px rgba(11, 218, 218, 0.15);
}

@media screen and (max-width: 959.98px) {
  :root {
    --header-height: 64px;
    --site-btn-height: 48px;
    --site-btn-small-height: 40px;
    --site-input-height: 48px;
    --site-container-padding: 20px;
  }
}

@media screen and (max-width: 767.98px) {
  :root {
    --header-height: 50px;
    --site-btn-height: 48px;
    --site-btn-small-height: 40px;
    --site-input-height: 48px;
    --site-input-gap: 4px;
    --site-input-error-height: 14px;
    --site-container-padding: 15px;
  }
}