/* =============================================================
   tokens.css
   色・余白・文字サイズなど「サイト全体で共通の値」を、ここ1か所に
   まとめて定義します。個別のパーツに色を直接書かないのは、後から
   配色を変えたくなったときに、このファイルの数行を書き換えるだけで
   全ページに反映させるためです。

   配色は、とわラボのロゴ（金色の∞）とハンコ（朱色）から取っています。
   ============================================================= */

:root {
  /* ---- ブランド色 -------------------------------------------
     金色はそのままでは白背景の文字に使えません（明るすぎて読めません）。
     そのため用途を2つに分けています。
       --c-gold   … 図形・線・ボタンの塗りに使う「見せる金」
       --c-accent … 文字やリンクに使う「読ませる金」（濃いめ）
     この2つを混同すると、読めない文字が生まれます。 */
  --c-gold: #c9a227;         /* ロゴの金に最も近い色 */
  --c-gold-light: #e0be5a;   /* 暗い背景の上で使う明るい金 */
  --c-accent: #8a6a12;       /* 白背景の文字に使える濃い金（コントラスト比 5.0:1） */
  --c-accent-strong: #6d5310; /* カーソルを乗せたときのさらに濃い金 */
  --c-accent-soft: #f7f0dc;  /* 見出しの下地やタグの背景に使う淡い金 */

  --c-seal: #b7332b;         /* ハンコの朱色。強調したい一点だけに使います */

  /* ---- 状態の色 ---------------------------------------------
     アプリ一覧ページ（apps.html）で、公開中かどうかを示すのに使います。
     色だけで区別させると、色が見分けにくい方に伝わりません。
     必ず「公開中」などの文字と併記してください。
       --c-ok   … 淡い緑地の上でコントラスト比 5.2:1
       --c-seal … 淡い赤地の上でコントラスト比 5.2:1 */
  --c-ok: #2f6f4e;
  --c-ok-soft: #e6f1ea;
  --c-seal-soft: #fbeceb;

  /* ---- 基本色（ライトモード） -------------------------------- */
  --c-ink: #14130f;          /* 墨黒。ファーストビューなど、締めたい面の背景 */
  --c-ink-text: #f2ede0;     /* 墨黒の上に乗せる文字の色 */

  --c-bg: #ffffff;
  --c-bg-sub: #faf7f0;       /* 金色に合う、わずかに温かみのある下地 */
  --c-surface: #ffffff;      /* カードの面 */
  --c-text: #1f1d17;         /* 純黒(#000)は硬く見えるため、わずかに温かい黒にします */
  --c-text-mute: #5b564a;    /* 補足文。背景白に対しコントラスト比 7.2:1 */
  --c-border: #e6e0d2;
  --c-border-strong: #cfc6b1;

  /* ---- 余白 ------------------------------------------------
     4pxの倍数だけを使います。中途半端な値を混ぜないことで
     ページ全体のリズムが揃います。 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- 文字 ------------------------------------------------
     本文は16px以上、行間1.8を基準にしています。日本語は
     英語より字面が詰まって見えるため、行間を広めに取ります。 */
  --ff-base: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic UI", sans-serif;

  --fs-xs: 0.8125rem;  /* 13px：注釈 */
  --fs-sm: 0.875rem;   /* 14px：ラベル */
  --fs-base: 1rem;     /* 16px：本文 */
  --fs-md: 1.0625rem;  /* 17px：やや大きい本文 */
  --fs-lg: 1.25rem;    /* 20px：小見出し */
  --fs-xl: 1.5rem;     /* 24px：セクション見出し */
  --fs-2xl: 1.875rem;  /* 30px：ページ見出し */
  --fs-3xl: 2.5rem;    /* 40px：ファーストビュー */

  --lh-tight: 1.4;
  --lh-base: 1.8;

  /* ---- レイアウト ------------------------------------------ */
  --w-content: 1080px;   /* 本文の最大幅 */
  --w-narrow: 720px;     /* 長文ページ（プライバシーポリシー等）の最大幅 */
  --header-h: 64px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(31, 29, 23, 0.06);
  --shadow: 0 2px 12px rgba(31, 29, 23, 0.09);
  --shadow-lg: 0 8px 28px rgba(31, 29, 23, 0.14);

  --transition: 0.2s ease;
}

/* ---- 配色（ダークモード） ----------------------------------
   端末が暗い配色を選んでいる場合に、色トークンだけを差し替えます。
   金色は暗い背景と相性が良いため、明るめの金をそのまま文字色に使えます。
   個別のパーツごとに色を上書きしないのは、対応漏れによる
   「読めない文字」を防ぐためです。 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-accent: #dcbb55;
    --c-accent-strong: #ecd07a;
    --c-accent-soft: #2b2519;

    /* 暗い背景では、同じ色をそのまま使うと沈んで読めません。
       明るい側に振り直します（どちらもコントラスト比 8:1 以上） */
    --c-ok: #7ed2a4;
    --c-ok-soft: #1e2b23;
    --c-seal: #f0a49d;
    --c-seal-soft: #2b1e1d;

    --c-bg: #14130f;
    --c-bg-sub: #1b1913;
    --c-surface: #211f18;
    --c-text: #f2ede0;
    --c-text-mute: #b3ab97;
    --c-border: #35322a;
    --c-border-strong: #4a463b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}