/* =========================================================
   Find My Coffee — Design Tokens
   ---------------------------------------------------------
   このファイルがサイト全体の「素材」です。
   色・余白・文字・動きの速度、すべてここで決まります。

   ■ フォントについて
     日本語が美しく出る Zen Old Mincho（見出し）と
     Zen Kaku Gothic New（本文）を読み込んでいます。
     読み込みをやめたい場合は、下の @import 行を消してください。
     消しても、端末のフォントで問題なく表示されます。
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  /* ---------- Color ----------
     ベース＝白。そこに生成り／ベージュ／ブラウンを重ね、
     深緑とゴールドは「ほんの少しだけ」使います。          */
  --paper:      #FFFFFF;   /* 主役の白 */
  --cream:      #FAF7F2;   /* 生成り */
  --sand:       #F2EBE1;   /* ベージュ */
  --clay:       #E4D9C9;   /* 濃いベージュ・罫線 */
  --clay-soft:  #EFE7DB;

  --ink:        #241C16;   /* ダークブラウン＝主要テキスト */
  --ink-2:      #6E5F52;   /* 副次テキスト */
  --ink-3:      #A0907F;   /* キャプション */

  --bark:       #7A5C42;   /* ブラウン */
  --espresso:   #1E1611;   /* いちばん深い茶 */

  --forest:     #2E4739;   /* 深緑（ポイント・ごく少量） */
  --gold:       #A9884F;   /* ゴールド（ポイント・ごく少量） */

  --line:       color-mix(in srgb, var(--ink) 10%, transparent);
  --line-soft:  color-mix(in srgb, var(--ink) 6%, transparent);

  --on-dark:    #F6F0E8;   /* 濃い背景の上の文字 */
  --on-dark-2:  #C9B9A6;

  /* 焙煎度スケール（豆のビジュアルに使用） */
  --roast-1: #D2B18B; --roast-2: #BC9160; --roast-3: #966C41;
  --roast-4: #67472F; --roast-5: #38231A;

  /* ---------- Space ----------
     余白は「多すぎるかな」くらいが正解。 */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 44px;  --s8: 64px;  --s9: 88px;  --s10: 120px;
  --s11: 160px;

  /* セクション間の呼吸。スマホでは詰め、大画面では広げる */
  --section-y: clamp(72px, 12vw, 160px);
  --gutter:    clamp(20px, 5.5vw, 40px);

  /* ---------- Radius / Elevation ---------- */
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-xl: 36px; --r-full: 999px;

  /* 影は「黒」ではなく「焦茶」。白背景でも濁らない */
  --shadow-xs: 0 1px 2px rgba(36,28,22,.04);
  --shadow-s:  0 2px 6px rgba(36,28,22,.05), 0 8px 20px rgba(36,28,22,.04);
  --shadow-m:  0 4px 12px rgba(36,28,22,.06), 0 18px 44px rgba(36,28,22,.07);
  --shadow-l:  0 8px 24px rgba(36,28,22,.08), 0 34px 80px rgba(36,28,22,.10);

  /* ---------- Type ---------- */
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho",
                  "Noto Serif JP", serif;
  --font-body:    "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
                  "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
                  "Segoe UI", sans-serif;

  /* 流体タイポ：スマホから大画面まで、なめらかに変化 */
  --t-hero:  clamp(2.15rem, 8.4vw, 4.75rem);
  --t-h1:    clamp(1.85rem, 6.4vw, 3.5rem);
  --t-h2:    clamp(1.5rem,  4.6vw, 2.5rem);
  --t-h3:    clamp(1.15rem, 3.4vw, 1.5rem);
  --t-lead:  clamp(1rem,    2.9vw, 1.25rem);
  --t-body:  clamp(.95rem,  2.6vw, 1.0625rem);
  --t-sm:    .875rem;
  --t-xs:    .75rem;

  --lh-display: 1.28;
  --lh-body:    1.95;

  /* 日本語は字間を少し開けると上品になる */
  --ls-display: .04em;
  --ls-body:    .02em;
  --ls-caps:    .24em;

  /* ---------- Layout ---------- */
  --w-wide:   1180px;
  --w-mid:    900px;
  --w-read:   680px;   /* 読み物の1行幅 */
  --header-h: 64px;

  /* ---------- Motion ----------
     「速く始まって、ゆっくり止まる」＝高級感の正体 */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast:   .22s;
  --d-base:   .42s;
  --d-slow:   .78s;
  --d-scene: 1.1s;
}

/* ---------- ダークモードについて ----------
   以前はスマホの「ダークモード」設定に合わせて暗い配色に切り替えていましたが、
   外しました。理由は3つです。

   ・このサイトの世界観は「白ベース＋生成り・ベージュ」。暗い配色と矛盾する
   ・写真がすべて暖かく明るいトーンなので、暗いUIの上だとちぐはぐに見える
   ・端末の設定次第で見え方が変わると、ブランドの印象が安定しない

   常に明るい配色で表示されます。
   もし将来もう一度入れたくなったら、ここに
   @media (prefers-color-scheme: dark) { :root { … } }
   を書けば復活します。上書きするのは色の変数だけで済みます。
   ------------------------------------------ */

/* 端末のUI（フォームなど）も明るい前提で描画させる */
:root { color-scheme: light; }

/* 動きを減らす設定の人には、動かさない（これは必須の配慮です） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}