/* ============================================================
   tokens.css — 珍美食 CHINBISHOKU
   全画面（ログイン後含む）が継承する唯一の定義元。
   ここ以外に色・サイズのリテラルを書かないこと。
   ============================================================ */

:root {
  /* ---- Color : 白 / 墨 / 森 の3色 + 琥珀(限定のみ) ---- */
  --paper:        #FFFFFF;
  --paper-warm:   #FAF8F3;
  --mist:         #F0EDE5;
  --line:         #E0DBD0;
  --line-soft:    #EFEBE2;

  --ink:          #1A1A15;
  --ink-70:       #4E4E45;
  --ink-45:       #8A867A;

  --forest:       #2C4636;
  --forest-mid:   #38553F;
  --forest-deep:  #1C2C23;

  --amber:        #9C6B24;

  /* ---- Typography ---- */
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-latin: "Cormorant Garamond", "Times New Roman", serif;

  --fs-display: clamp(2.9rem, 7.6vw, 6rem);
  --fs-h2:      clamp(2rem, 4.4vw, 3.5rem);
  --fs-h3:      clamp(1.35rem, 2.2vw, 2rem);
  --fs-lead:    clamp(1.12rem, 1.5vw, 1.4rem);
  --fs-body:    clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-small:   clamp(0.9375rem, 1vw, 1rem);
  --fs-label:   0.8125rem;

  --lh-body: 2;
  --lh-head: 1.45;
  --ls-head: 0.04em;
  --ls-body: 0.02em;
  --ls-label: 0.18em;

  /* ---- Layout ---- */
  --gutter: clamp(20px, 5vw, 72px);
  --container: min(1240px, 100% - var(--gutter) * 2);
  --measure: 34em;
  --sec-y: clamp(120px, 16vh, 220px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16, .84, .24, 1);
  --dur-reveal: 900ms;
  --dur-rise: 700ms;

  /* ---- 写真プレースホルダ（--img 未指定時の自然物グラデーション） ---- */
  --placeholder:
    radial-gradient(78% 62% at 24% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(64% 58% at 78% 82%, rgba(44,70,54,.30) 0%, rgba(44,70,54,0) 66%),
    linear-gradient(148deg, #EFEBE1 0%, #DFE3D6 44%, #C9CFBE 100%);
}

/* ------------------------------------------------------------
   写真プレースホルダのバリエーション
   実写を入れる際は、この class を消して
   style="--img:url('assets/img/xxx.jpg')" を指定するだけでよい。
   ------------------------------------------------------------ */
.ph-hero { --placeholder:
  radial-gradient(70% 55% at 30% 24%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
  radial-gradient(80% 70% at 76% 88%, rgba(20,38,26,.72) 0%, rgba(20,38,26,0) 62%),
  linear-gradient(158deg, #7E8A6C 0%, #4C5B45 42%, #22301F 100%); }

.ph-a { --placeholder:
  radial-gradient(62% 52% at 26% 20%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 64%),
  linear-gradient(150deg, #E9EEE0 0%, #B9C6A4 55%, #6E8058 100%); }

.ph-b { --placeholder:
  radial-gradient(58% 50% at 70% 26%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 60%),
  linear-gradient(140deg, #EDE7EE 0%, #B4A7C4 48%, #4B4664 100%); }

.ph-c { --placeholder:
  radial-gradient(60% 50% at 32% 28%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 62%),
  linear-gradient(146deg, #FBF1DF 0%, #E8C285 50%, #B07C2C 100%); }

.ph-d { --placeholder:
  radial-gradient(64% 54% at 74% 22%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 62%),
  linear-gradient(152deg, #F2F0E4 0%, #C9CDA6 52%, #7C7F4E 100%); }

.ph-e { --placeholder:
  radial-gradient(58% 48% at 30% 22%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 58%),
  linear-gradient(150deg, #4A5A4C 0%, #2A3A30 46%, #141E18 100%); }

.ph-f { --placeholder:
  radial-gradient(70% 60% at 50% 30%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 64%),
  linear-gradient(168deg, #6D7C60 0%, #3B4A38 48%, #1B241B 100%); }