/* ==========================================================================
   variable.css
   全ページ共通の変数定義。
   このファイルを一番最初に読み込むこと。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cascade Layers（レイヤーの優先順位を宣言）
   後ろにあるレイヤーほど詳細度に関係なく優先される。
   読み込み順に関わらず、常に reset < variable < common < page の優先順位になる。
   -------------------------------------------------------------------------- */
@layer reset, variable, common, page;

@layer variable {
  :root {
    /* ---------------------------------------------------------------------
          Colors
          サイトによって書き換える前提。命名は役割ベース（見た目の色名にしない）
          --------------------------------------------------------------------- */

    /* primary：メインカラー。ロゴ・見出し・基調テキストなど、サイトの基準になる色 */
    --color-primary: #272726;
    /* secondary：サブカラー。控えめなテキスト、補助的な要素に使う */
    --color-secondary: #4d4c4a;
    /* accent：差し色。CTAボタン、リンクホバー、強調したい部分だけに使う */
    --color-accent: #b08d57;

    /* bg：ページ全体の背景色 */
    --color-bg: #ffffff;
    /* bg-alt：背景色のバリエーション。セクションの区切りなどで背景を薄く変えたい時に使う（footerの背景など） */
    --color-bg-alt: #f6f5f4;

    /* text：本文の基本文字色 */
    --color-text: #272726;
    /* text-light：暗い背景の上に置く文字色（ボタンの中の文字など） */
    --color-text-light: #ffffff;
    /* text-muted：控えめにしたい文字色（コピーライト、日付、補足テキストなど） */
    --color-text-muted: #8a8a8a;

    /* border：線・区切り線の色（header下の境界線など） */
    --color-border: #e0e0e0;

    /* error：フォームのエラーメッセージなど、注意喚起の赤 */
    --color-error: #c0392b;
    /* success：完了メッセージなど、成功を表す緑 */
    --color-success: #2e7d32;

    /* ---------------------------------------------------------------------
          Font families
          使わない書体の行は削除、または案件ごとに書き換える
          --------------------------------------------------------------------- */

    /* base：本文・基本のフォント（bodyに指定） */
    --font-base: "Noto Serif JP", serif;
    /* heading：見出し専用のフォント（h1, h2など） */
    --font-heading: "Zen Old Mincho", serif;
    /* en：英字だけに使うフォント（英語の見出し、ロゴ横の英字表記など） */
    --font-en: "Cormorant Garamond", serif;

    /* ---------------------------------------------------------------------
          Font sizes（フルードタイポグラフィ：画面幅に応じて自動調整）
          clamp(最小値, 可変値, 最大値)
          数字が大きいほど文字も大きくなる。用途の目安は右のコメント参照
          --------------------------------------------------------------------- */
    --fs-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem); /* 注釈・コピーライトなど最小サイズ */
    --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); /* ナビ・ボタン・補足テキスト */
    --fs-base: 1.4rem; /* 本文の標準サイズ（bodyに指定） */
    --fs-md: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); /* 小見出し・カードタイトルなど */
    --fs-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* セクション見出し（h2など） */
    --fs-xl: clamp(2rem, 1.6rem + 2vw, 3rem); /* ページ内の大見出し（h1など） */
    --fs-xxl: clamp(
      2.5rem,
      1.8rem + 3vw,
      4.5rem
    ); /* トップページのメインキャッチコピーなど、最大サイズ */

    --lh-base: 1.8; /* 本文の行間 */
    --lh-heading: 1.4; /* 見出しの行間（本文より詰め気味にするのが一般的） */

    /* ---------------------------------------------------------------------
          Spacing（8pxベース。padding/margin/gapで使い回す）
          数字が大きいほど余白も大きくなる
          --------------------------------------------------------------------- */
    --space-3xs: 0.25rem; /* 4px相当。アイコンとテキストの隙間など、極小の間隔 */
    --space-2xs: 0.5rem; /* 8px相当。ボタン内の細かい余白など */
    --space-xs: 0.75rem; /* 12px相当。小要素同士の間隔 */
    --space-sm: 1rem; /* 16px相当。基本の余白単位 */
    --space-md: 2rem; /* 32px相当。要素のまとまり間の余白 */
    --space-lg: 4rem; /* 64px相当。セクション内の余白 */
    --space-xl: 6rem; /* 96px相当。セクションとセクションの間（padding-block等） */
    --space-2xl: 8rem; /* 128px相当。ページ上部・下部など特に広く空けたい箇所 */

    /* ---------------------------------------------------------------------
          Layout
          --------------------------------------------------------------------- */
    --content-width: 1440px; /* コンテンツ幅の基本上限（l-containerで使用） */
    --content-width-narrow: 800px; /* 本文中心のページ（下層ページ等）で使う狭めの幅 */
    --content-padding: clamp(1rem, 4vw, 3rem); /* l-containerの左右の余白 */

    /* ---------------------------------------------------------------------
          Radius / Shadow
          --------------------------------------------------------------------- */
    --radius-sm: 4px; /* ボタンなど、小さい角丸 */
    --radius-md: 8px; /* カードなど、中くらいの角丸 */
    --radius-full: 999px; /* 円形・ピル型にしたい時（丸ボタンなど） */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); /* カードなど、軽い浮き上がり感 */
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); /* モーダルなど、はっきりした浮き上がり感 */

    /* ---------------------------------------------------------------------
          Transition（アニメーションの速さ）
          --------------------------------------------------------------------- */
    --transition-fast: 0.2s ease; /* ホバーなど、瞬間的な変化 */
    --transition-base: 0.3s ease; /* 基本の変化速度（ボタン、リンクホバーなど） */
    --transition-slow: 0.6s ease; /* ドロワーメニューの開閉など、ゆったり見せたい変化 */

    /* ---------------------------------------------------------------------
          Z-index（重なり順。管理が煩雑になりやすいので一箇所に集約）
          数字が大きいほど手前に表示される
          --------------------------------------------------------------------- */
    --z-header: 100; /* ヘッダー（sticky/fixedで浮かせる時） */
    --z-drawer: 200; /* SPのハンバーガーメニュー（ドロワー） */
    --z-modal: 1000; /* モーダルウィンドウ */
    --z-toast: 1100; /* 通知・トースト（一番手前に出したいもの） */

    /* ---------------------------------------------------------------------
          Breakpoints（値の参照用メモ。CSS変数はメディアクエリの条件式に使えないため
          実際に @media (max-width: ...) を書く時はこの数値を直書きする）
          tablet: 1024px / sp: 768px / sp-small: 480px
          --------------------------------------------------------------------- */

    color-scheme: light;
  }
}

/* ダークモード対応が必要な案件のみコメントを外す
   @layer variable {
     @media (prefers-color-scheme: dark) {
       :root {
         --color-bg: #1a1a1a;
         --color-bg-alt: #242424;
         --color-text: #f0f0f0;
         color-scheme: dark;
       }
     }
   }
   */