/*
 * SIA TOKYO — Design Tokens
 * すべての色・タイポ・余白・アニメーション値はこのファイルの CSS カスタムプロパティ経由でのみ参照する。
 * 基調はホワイト／シルバー／ゴールド。実装側（base.css / style.css）で色を直書き（#hex や rgb()）しないこと。
 */

:root {
  /* ============ Color ============ */
  --c-bg:        #fbfaf8;  /* 温かみのあるオフホワイト。純白 #fff は使わない */
  --c-bg-alt:    #f4f2ee;  /* セクション交互。差は僅かでよい */
  --c-surface:   #ffffff;  /* カードのみ純白にして僅かに浮かせる */
  --c-text:      #1a1a1c;  /* 純黒 #000 は使わない。僅かに柔らげる */
  --c-text-dim:  #6f6c67;  /* 補助テキスト。白背景で 4.5:1 を確保するため旧 #7d7a74 から同色相のまま明度のみ低下 */
  --c-silver:    #c9c7c2;  /* 罫線・区切り */
  --c-silver-lt: #e3e1dc;  /* 淡い罫線 */
  --c-gold:      #856b3e;  /* 小さい文字でも 4.5:1 を確保するため旧 #a8874e から同色相のまま明度のみ低下。深いブロンズ寄りの金 */
  --c-gold-lt:   #cbb68c;  /* ゴールドのヘアライン・装飾のみ。文字には使わない */
  --c-gold-dim:  #7a6741;  /* 罫線（旧変数名を維持） */
  --c-line:      rgba(26, 26, 28, 0.20);

  /* 用途別エイリアス */
  --color-bg:            var(--c-bg);
  --color-bg-alt:        var(--c-bg-alt);
  --color-surface:       var(--c-surface);
  --color-text:          var(--c-text);
  --color-text-dim:      var(--c-text-dim);
  --color-silver:        var(--c-silver);
  --color-silver-lt:     var(--c-silver-lt);
  --color-accent:        var(--c-gold);
  --color-accent-dim:    var(--c-gold-dim);
  --color-line:          var(--c-line);
  --color-selection-bg:  var(--c-gold);
  --color-selection-text:var(--c-bg);
  --color-scrollbar-thumb: var(--c-gold-dim);
  --color-scrollbar-track: var(--c-bg-alt);

  /* ============ Typography: font families ============ */
  --font-en-serif: 'Playfair Display', serif;                       /* 英字見出し・数字（料金） */
  --font-jp-serif: 'Shippori Mincho', 'Noto Serif JP', serif;       /* 和文見出し */
  --font-jp-sans:  'Shippori Mincho', 'Noto Serif JP', serif;       /* 和文本文（明朝。変数名は維持） */

  /* ============ Typography: scale ============
     モジュラースケール（clamp によるフルード対応） */
  --fs-display:  clamp(2.75rem, 2.1rem + 3.2vw, 5.5rem);   /* HERO 大見出し */
  --fs-h1:       clamp(2rem, 1.6rem + 2vw, 3.5rem);        /* セクション英字見出し(大) */
  --fs-h2:       clamp(1.5rem, 1.3rem + 1vw, 2.25rem);     /* サブ見出し */
  --fs-h3:       clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-lead:     clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* リード文 */
  --fs-body:     1rem;                                      /* 本文 */
  --fs-small:    0.8125rem;                                 /* 補助・注記 */
  --fs-label:    0.75rem;                                   /* ラベル・キャプション */

  /* ============ Typography: letter-spacing ============ */
  --ls-en-heading: 0.10em;  /* 英字見出し（Playfair Display）。白地では開きすぎるとバラバラに見える */
  --ls-jp-heading: 0.08em;  /* 和文見出し */
  --ls-body:       0.06em;  /* 本文の字送り */
  --ls-label:      0.16em;  /* ラベル・ナビ等の広め字送り */

  /* ============ Typography: line-height ============ */
  --lh-heading: 1.3;
  --lh-body:    2.0;   /* 本文の行間で「静けさ」を作る */
  --lh-tight:   1.1;

  /* ============ Spacing / Layout ============ */
  --max-width:        1240px;
  --section-padding-y: clamp(96px, 14vh, 180px);
  --section-padding-x: clamp(20px, 5vw, 64px);
  --gap-xs:  8px;
  --gap-sm:  16px;
  --gap-md:  32px;
  --gap-lg:  64px;
  --gap-xl:  96px;

  /* ============ Border / Line ============ */
  --line-width: 1px;
  --radius-none: 0px; /* ラグジュアリー感のため角丸は基本使わない */

  /* ============ Motion ============ */
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --duration-fast:   0.3s;
  --duration-base:   0.6s;
  --duration-reveal: 1.1s;   /* IntersectionObserver によるフェード */
  --duration-hero-scale: 8s; /* HERO 画像の scale 1.08→1.0 */
  --delay-logo: 1.2s;
}