/* ===========================================================================
   Gamarjoba — デザイントークン（唯一の情報源）
   ---------------------------------------------------------------------------
   ⛔ 画面固有の色・文字サイズ・余白をCSSに直接書かない。必ずここの変数を使う。
   ⛔ 新しい値を無断で足さない。必要なら理由を説明してから追加する。

   色は推測ではなく、オーナー自身の旧公式サイトのヘッダー画像に合成された
   Fridon Nizharadze の絵から抽出した実測値に基づく:
       太陽の金   #A99933  → --c-gold   (文字可読性のため少し明るく #B99B2E)
       光線の青緑 #9BBABA  → --c-teal   (文字用に暗く #275C5C)
       滴りの赤   #521E11  → --c-clay   (面として使うため少し明るく #7A2A18)
       室内の木闇 #0C0A09〜#998A70 → --c-ink 系
       谷の苔     #3A4C20 → --c-moss
   コントラスト比は全20ペアを計算して確認済み（_docs/01-design-system.md §5）。
   =========================================================================== */

:root {
  /* ---- 色：地 ------------------------------------------------------------ */
  --c-paper:      #FAF7F1;   /* 既定の背景。漆喰と雪の光 */
  --c-paper-2:    #F1ECE1;   /* 面を1段落とす。カード、帯 */
  --c-stone:      #E2DACB;   /* 無効状態の面、表のヘッダ */

  /* ---- 色：文字 ---------------------------------------------------------- */
  --c-ink:        #1A1613;   /* 本文・見出し。16.81:1 on paper */
  --c-ink-2:      #4A4239;   /* 副次的な本文。 9.22:1 */
  --c-ink-3:      #6B6154;   /* 補足・キャプション。5.67:1 */
  --c-ink-muted:  #6F675C;   /* 無効時の文字。4.01:1 on stone */

  /* ---- 色：線（役割で分ける。混同しない）--------------------------------- */
  --c-rule:       #D8CFBE;   /* 装飾的な区切り線。コントラスト要件なし */
  --c-border:     #8A7F6C;   /* 部品の境界。3.68:1 — WCAG 1.4.11 を満たす */

  /* ---- 色：Fridon の絵から ----------------------------------------------- */
  --c-gold:       #B99B2E;   /* 太陽。面として使い、文字は ink を載せる */
  --c-gold-soft:  #EFE3BE;   /* 金の淡い面。ギャラリー節の背景 */
  --c-teal:       #275C5C;   /* リンク。7.09:1 */
  --c-clay:       #7A2A18;   /* 主ボタンの面。paper を載せて 9.04:1 */
  --c-moss:       #26301B;   /* 反転セクションの地。paper を載せて 12.91:1 */

  /* ---- 色：状態 ---------------------------------------------------------- */
  --c-ok:         #2F5D3A;
  --c-warn:       #8A5A00;
  --c-err:        #94271F;

  /* ---- 書体 -------------------------------------------------------------- */
  /* 見出し：Newsreader（SIL OFL、自己ホスト、サブセット）。未導入時も
     metric近似のフォールバックで崩れないよう指定する。 */
  --f-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino,
               Georgia, "Times New Roman", serif;
  /* 本文：システムフォント。webフォント0バイト。弱い回線が前提のため。 */
  --f-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* 数字：等幅数字。価格が縦に揃う。 */
  --f-num:     var(--f-body);

  /* ---- 文字サイズ（rem。最小 14px = 0.875rem を下回らない）--------------- */
  /* 扉とギャラリーの頂点だけに使う。_docs/10-art-direction.md AD-1。 */
  --t-hero:    clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);
  --t-display: clamp(2.00rem, 1.30rem + 3.0vw, 3.25rem);  /* h1 */
  --t-h2:      clamp(1.50rem, 1.15rem + 1.5vw, 2.10rem);
  --t-h3:      clamp(1.20rem, 1.05rem + 0.7vw, 1.45rem);
  --t-lede:    clamp(1.10rem, 1.02rem + 0.4vw, 1.25rem);  /* 導入文 */
  --t-body:    1.0625rem;   /* 17px。PC・モバイル共通 */
  --t-label:   0.9375rem;   /* 15px。ラベル、ボタン */
  --t-small:   0.875rem;    /* 14px。補足。★これが下限 */

  /* ★追加 2026-08-17（規約5により理由を明記）
     --track-label: tokens.css に字送りの段が1つも無かった。大文字・小サイズの
     壁ラベルは字送りを足さないと読めない（14px の uppercase が最も詰まって見える）。
     em 相対なので文字サイズが変わっても崩れない。使用は .label のみ。 */
  --track-label: 0.08em;

  /* ---- 太さ -------------------------------------------------------------- */
  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   700;

  /* ---- 行間 -------------------------------------------------------------- */
  --lh-tight: 1.15;   /* 見出し */
  --lh-snug:  1.35;   /* 小見出し、リード */
  --lh-body:  1.65;   /* 本文。長文の可読性を優先 */

  /* ---- 余白（基本単位 4px。この階段以外の値を使わない）------------------- */
  --s1:  0.25rem;  /*  4px */
  --s2:  0.5rem;   /*  8px */
  --s3:  0.75rem;  /* 12px */
  --s4:  1rem;     /* 16px */
  --s5:  1.5rem;   /* 24px */
  --s6:  2rem;     /* 32px */
  --s7:  3rem;     /* 48px */
  --s8:  4rem;     /* 64px */
  --s9:  6rem;     /* 96px */

  /* ---- 寸法 -------------------------------------------------------------- */
  --tap:        44px;    /* 最小タップ領域。モバイルで全操作部品に適用 */
  --ctrl-h:     44px;    /* ボタン・入力欄の高さ */
  --ctrl-h-sm:  36px;    /* 補助的な操作。モバイルでは使わない */
  --measure:    34rem;   /* 本文の最大行長 */
  --wrap:       72rem;   /* ページ最大幅 */
  --wrap-pad:   var(--s5);

  /* ---- 角丸（控えめに。石と木の建物なので過度に丸めない）----------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* ---- 影（原則使わない。使うのはダイアログのみ）------------------------- */
  --shadow-dialog: 0 12px 32px rgb(26 22 19 / 28%);

  /* ---- フォーカス（全部品で同一。見えることが最優先）--------------------- */
  --focus-w: 3px;
  --focus-c: var(--c-gold);
  --focus-offset: 2px;
}

/* モバイルで詰める余白だけをここで上書きする。個別画面では上書きしない。 */
@media (max-width: 599px) {
  :root {
    --wrap-pad: var(--s4);
    --s9: 4rem;
    --s8: 3rem;
  }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}