@charset "UTF-8";
/*!
 * seven-tokens.css — 共通デザイントークン（Phase D: 骨組みのみ）
 * ===========================================================================
 * ファミリーカットサロン セブン / fcs7
 * 作成: 2026-09-02 (STEP3 Phase D)
 *
 * 【現状】
 * このファイルにはスタイル宣言が1つもありません。
 * Phase D の要件「Phase C 後と見た目が完全に同一であること」を満たすため、
 * 意図的にコメントのみとしています。
 *
 * 【役割】
 * 全 seven-* CSS が参照する唯一の値の供給元。色・字送り・余白などの
 * 「決め」はすべてここに集約し、他ファイルは変数を参照するだけにする。
 * これにより、チャッピー側のデザイン変更をこの1ファイルの修正で反映できる。
 *
 * 【将来ここで定義する予定のトークン群】
 *   基礎レイヤ
 *     - color        … 背景 / 面 / 本文 / 副文 / ブランド / アクセント / 境界 / LINE
 *     - typography   … font-family / サイズスケール / 行間 / ウェイト
 *     - spacing      … セクション間・要素間の余白スケール
 *     - container    … 最大幅（全体 / 記事本文）
 *     - radius       … カード / 大型写真 / ボタン
 *     - shadow       … 控えめな階層表現
 *     - breakpoint   … 参照用のメモ（CSS変数はメディアクエリに使えないため）
 *
 *   コンポーネントレイヤ（基礎レイヤから合成する）
 *     - button       … 高さ・パディング・タップ領域
 *     - CTA          … 主/副 CTA の面・文字・境界
 *     - card         … 汎用カードの面・境界・余白
 *
 *   収益化レイヤ（基礎レイヤから合成する）
 *     - LINE予約CTA        店舗集客の最重要導線
 *     - 商品CTA            店販商品の注文・問い合わせ
 *     - アフィリエイトCTA   記事内・記事末
 *     - 店販商品カード      店頭で扱う商品の紹介
 *     - おすすめ商品        記事文脈に応じた推奨
 *     - 比較表              商品・メニューの比較
 *     - 収益化用注記        価格・在庫・条件などの但し書き
 *     - PR表記              広告・アフィリエイトである旨の明示
 *     - 商品ラベル          「店頭限定」「数量限定」等
 *
 * 【重要 / 現段階の制約】
 * 具体的な値はまだ設定しません。配色・タイポ・余白の決定権は
 * ChatGPT（チャッピー）側にあり、Claude Code は独自判断で決めません。
 * 仕様が確定してから、下記の形で値を入れます。
 *
 *   :root {
 *     --seven-color-bg: ...;
 *     --seven-color-primary: ...;
 *     --seven-space-section: ...;
 *     ...
 *   }
 *
 * 【命名規則】
 * カスタムプロパティ … --seven-<カテゴリ>-<役割>[-<状態>]
 *   例) --seven-color-primary / --seven-cta-line-bg / --seven-space-section
 * クラス           … .seven-* を原則とする（.fcs7-* も予約）
 *   Cocoon / TablePress / WordPress コアの既存クラスとの衝突を避けるため、
 *   汎用語だけのクラス名（.card / .button / .price など）は使わない。
 *
 * 【禁止事項】
 * - !important による強制（Phase D 以降も原則禁止）
 * - 要素セレクタへのグローバル指定（body, a, h1 等の裸指定）
 * - Cocoon / skin-season-autumn のクラスを直接上書きすること
 *   → 必要な場合は seven-* のスコープ内で行う
 * ===========================================================================
 */

/* ===========================================================================
   Phase E1: トークン実装
   チャッピー指定値のみを定義する。ここに無い色・寸法は各CSSで直書きしない。
   =========================================================================== */
:root {
  /* --- color: 基礎 --- */
  --seven-bg:            #F7F5F1;
  --seven-surface:       #FFFFFF;
  --seven-text:          #26312E;
  --seven-text-muted:    #66716D;

  --seven-primary:       #2F5B54;
  --seven-primary-dark:  #23463F;
  --seven-primary-soft:  #E7EFEC;

  --seven-accent:        #B78565;
  --seven-accent-soft:   #F1E6DE;

  --seven-border:        #DED9D1;

  /* LINE専用。通常UIのアクセントには流用しない。 */
  --seven-line:          #06C755;
  --seven-line-dark:     #05A948;

  /* --- typography --- */
  --seven-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                "Yu Gothic", Meiryo, sans-serif;

  --seven-fs-body:   16px;
  --seven-lh-body:   1.8;
  --seven-fs-h1:     clamp(32px, 4vw, 56px);
  --seven-fs-h2:     clamp(26px, 3vw, 36px);
  --seven-fs-h3:     clamp(20px, 1.6vw, 22px);
  --seven-fs-small:  14px;

  /* --- spacing / layout --- */
  --seven-container:      1180px;
  --seven-gutter:         16px;   /* mobile */
  --seven-gutter-desktop: 24px;
  --seven-section-y:      56px;   /* mobile */
  --seven-gap:            16px;

  /* --- radius / border / shadow --- */
  --seven-radius:       16px;
  --seven-radius-pill:  999px;
  --seven-border-w:     1px;
  --seven-shadow:       0 1px 2px rgba(38, 49, 46, .04);

  /* --- button --- */
  --seven-btn-h:  54px;
  --seven-tap:    44px;
}

@media (min-width: 768px) {
  :root {
    --seven-gutter:    var(--seven-gutter-desktop);
    --seven-section-y: 72px;
    --seven-gap:       24px;
  }
}

@media (min-width: 1024px) {
  :root { --seven-section-y: 96px; }
}