/* ==========================================================
   Stride デザイントークン
   アプリ(COLORS_DARK ほか)と同じ値。サイトはダーク固定。
   ========================================================== */

:root {
  color-scheme: dark;

  /* 基本色(アプリの COLORS_DARK と同じ値) */
  --bg: #0f1117;            /* 背景 */
  --surface: #14161f;       /* カード面・ヘッダー */
  --surface-warm: #201d33;  /* 強調したいカード(アプリでは「次回までのテーマ」カード) */
  --border: #2b283d;        /* 境界線 */
  --text: #e8eaf0;          /* テキスト(主) コントラスト比 15.7 */
  --text-muted: #9aa3b2;    /* テキスト(副) コントラスト比 7.4 */
  --accent: #818cf8;        /* アクセント(インディゴ) コントラスト比 6.3 */
  --accent-soft: #211f38;   /* アクセントの薄塗り(セカンダリボタンの面) */
  --on-accent: #0f1117;     /* アクセント色の上の文字(黒文字) */
  --ps-accent: #a5b4fc;     /* サブアクセント(淡いインディゴ) */

  /* SAFE / CAUTION / CRISIS の状態色 */
  --safe: #818cf8;
  --caution: #e0a855;
  --crisis: #f87171;

  /* 機能ごとの識別色(アイコンと英字ラベルにだけ使う。カードの枠は共通の --border) */
  --c-checkin: #818cf8;     /* チェックイン・ストレス記録・Bridge Session・診察等の記録 */
  --c-tell: #a5b4fc;        /* 伝えたいことメモ・コーピング・マインドフルネス */
  --c-achievement: #e0a855; /* できたことログ */
  --c-sleep: #7c9cbf;       /* 睡眠日誌 */
  --c-crisis: #f87161;      /* クライシスプラン */
  --c-med: #34d399;         /* おくすりメモ */

  /* 角丸 */
  --r-sm: 10px;   /* 小さいボタン・入力欄・小カード */
  --r-md: 12px;   /* ボタン */
  --r-lg: 14px;   /* カード・タイル */
  --r-xl: 16px;   /* 大きいカード */
  --r-pill: 20px; /* ピル型のチップ */

  --font: 'Noto Sans JP', sans-serif;

  /* ---- ここから下はサイト向けの追加(アプリの値を倍数で広げたもの) ---- */

  /* 面のグラデーション(アプリのカード) */
  --card-grad: linear-gradient(135deg, #1c1e27, #14161f);
  --border-emph: rgba(129, 140, 248, 0.19);

  /* 余白(アプリの基準 8 / 10 / 12 / 16 / 20 / 24) */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 20px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* レイアウト */
  --gutter: 20px;                 /* モバイルの左右余白 */
  --container: 1120px;            /* 全体の最大幅 */
  --measure: 700px;               /* 本文1行の最大幅(全角40字前後) */
  --section-y: 72px;              /* 区画の上下(モバイル 64〜80) */
  --header-h: 56px;

  /* 文字サイズ(モバイル基準。PCは下のメディアクエリで上書き) */
  --fs-hero: clamp(28px, 2.6vw + 18px, 48px); /* キャッチコピー 28〜32 / PC 44〜48 */
  --fs-h2: clamp(22px, 1.4vw + 17px, 32px);   /* 区画見出し 22〜24 / PC 30〜32 */
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 11px;
  --lh-body: 1.8;
  --lh-head: 1.4;

  /* 動き(アプリの画面切替 0.18秒・下から6px) */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: .2s;

  /* お知らせバナー表示中にJSが高さを入れる */
  --notice-h: 0px;
}

@media (min-width: 960px) {
  :root {
    --gutter: 40px;
    --section-y: 112px;           /* PC 96〜128 */
    --header-h: 64px;
    --fs-body: 17px;
    --fs-h3: 20px;
    --lh-body: 1.9;
  }
}