@charset "utf-8";

/*
 * GOKAN PARLOIR - デザイントークン
 *
 * 既存サイトのデザインを CSS 変数として定義した参照ファイル。
 * 既存の style.css / index.css / salon-menu.css は書き換えず、
 * 新規ページや新規パーツでこの変数を参照する設計。
 *
 * 詳細仕様: _docs/design-system.md
 *
 * 使用例:
 *   color: var(--color-text-primary);
 *   background-color: var(--color-bg-primary);
 *   transition: opacity var(--transition-base);
 */

:root {

  /* ===== カラーパレット ===== */

  /* 背景 */
  --color-bg-primary: #FFF7D9;       /* body 背景・全体ベース(クリーム) */
  --color-bg-card: #fff8e8;          /* カード・区切りブロック背景 */

  /* テキスト */
  --color-text-primary: #530B02;     /* 見出し・本文メインカラー(ダークブラウン) */
  --color-text-body: #3a2210;        /* 本文の親しみやすい暗色(ウォームブラウン) */

  /* アクセント */
  --color-accent-yellow: #FDC600;    /* マスタード・フッター背景・ボタン */
  --color-accent-brown: #af7a17;     /* menu-h2 等の濃い装飾 */
  --color-accent-amber: #8a5c10;     /* サブ見出し・キャプション */
  --color-accent-gold: #c8960a;      /* brand-catch 装飾 */

  /* 黒・赤 */
  --color-warm-black: #2b2117;       /* yellow-btn ホバー時 */
  --color-wine: #640C06;             /* スマホハンバーガーメニュー */

  /* 透過カラー(rgba) */
  --color-deco-line: rgba(180, 130, 50, 0.5);    /* 装飾線(明) */
  --color-deco-line-soft: rgba(180, 130, 50, 0.3); /* 装飾線(暗) */
  --color-header-bg: rgba(253, 198, 0, 0.85);    /* スクロール時の半透明ヘッダー */
  --color-menu-bg: rgba(255, 247, 217, 0.95);    /* スマホハンバーガー展開時 */

  --color-text-soft: rgba(83, 11, 2, 0.7);       /* dt 要素・キャプション */
  --color-text-fade: rgba(83, 11, 2, 0.4);       /* 装飾英文字 */
  --color-border-soft: rgba(83, 11, 2, 0.2);     /* フッターボトム境界線 */
  --color-hover-bg: rgba(83, 11, 2, 0.12);       /* nav-icon-link ホバー背景 */


  /* ===== タイポグラフィ ===== */

  /* フォントファミリー */
  --font-body: 'gokan', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  --font-heading: 'gokan', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', serif;
  --font-en: 'Nunito', sans-serif;
  --font-en-serif: Georgia, 'Times New Roman', serif;

  /* フォントサイズ(rem) */
  --font-size-page-title-pc: 7rem;
  --font-size-page-title-sp: 4.5rem;
  --font-size-page-title-ja: 1.1rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;
  --font-size-price: 2rem;
  --font-size-price-tax: 1.6rem;
  --font-size-body: 1.5rem;
  --font-size-nav-pc: 1.6rem;
  --font-size-nav-tablet: 1.5rem;
  --font-size-button: 1.4rem;
  --font-size-footer: 1.3rem;
  --font-size-caption: 1.2rem;
  --font-size-en-decoration: 1.0rem;

  /* 文字間隔 */
  --letter-spacing-body: 0.05em;
  --letter-spacing-button: 0.18em;
  --letter-spacing-en-section: 0.3em;
  --letter-spacing-en-title: 0.55em;
  --letter-spacing-en-catch: 0.45em;
  --letter-spacing-en-large: 0.2em;

  /* 行間 */
  --line-height-body: 1.7em;
  --line-height-story: 2.6em;
  --line-height-footer: 1.9em;
  --line-height-concept: 2em;


  /* ===== スペーシング ===== */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 7rem;
  --space-3xl: 10rem;


  /* ===== サイズ ===== */

  --container-max: 1270px;
  --container-width: 85%;
  --container-nav-width: 90%;
  --content-narrow: 800px;
  --content-footer: 1100px;

  --header-height-pc: 75px;
  --header-height-sp: 62px;


  /* ===== 角丸 ===== */

  --radius-pill: 100px;
  --radius-circle: 50%;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;


  /* ===== シャドウ ===== */
  /* 既存サイトはフラット路線。新規パーツで必要時に使用 */

  --shadow-sm: 0 1px 2px rgba(83, 11, 2, 0.08);
  --shadow-md: 0 4px 12px rgba(83, 11, 2, 0.10);
  --shadow-lg: 0 10px 30px rgba(83, 11, 2, 0.12);


  /* ===== トランジション ===== */

  --transition-fast: 0.2s;
  --transition-quick: 0.25s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;

  --easing-menu: cubic-bezier(0.04, 0.04, 0.12, 0.96);


  /* ===== Z-index 管理 ===== */
  /* 既存サイトに散在する z-index を集約 */

  --z-header: 100;
  --z-header-mobile: 999;
}


/*
 * ===== ブレークポイント参考(変数化できないのでコメントで明示) =====
 *
 * モバイル:    @media screen and (max-width: 480px)
 * モバイル汎用: @media screen and (max-width: 768px)   ── font-size: 54%
 * タブレット:  @media screen and (min-width: 768px) and (max-width: 1190px) ── font-size: 59%
 * PC:         @media screen and (min-width: 1190px)   ── font-size: 62.5%
 *
 * ベースは rem 単位で書く。html の font-size がブレークポイントごとに変わるため
 * 自動的にスケーリングされる。
 */