/* ==========================================================================
   solopic — theme.css
   デザイントークンのみ。色・書体・角丸・余白・影・トランジションを一元管理。
   ページCSS(site.css / index内)は必ず var() 参照で書くこと（ハードコード色禁止）。
   予約サイト reserve.solo-pic.site と同一の世界観。
   ========================================================================== */

:root {
  /* ---- 基調カラー（予約サイトと共通の指定値） ---- */
  --c-bg:          #fafaf7;   /* ページ地。ごく淡いウォームグレー */
  --c-fg:          #1a1814;   /* 墨に近い文字色（純黒は使わない） */
  --c-accent:      #8a6d4a;   /* ブラウンアクセント（文字にも使える濃さ） */
  --c-accent-soft: #6e573a;   /* アクセントの一段濃い版（hover・強調） */
  --c-line:        #ece8e0;   /* 罫線・区画線に使う淡いライン色 */

  /* ---- 面（背景の層）---- */
  --c-white:       #ffffff;   /* 純白（色付き面・ダーク地の上の文字/線に使う定数） */
  --c-card:        #ffffff;   /* 白カード。最前面の紙 */
  --c-panel:       #f3efe7;   /* 淡ベージュ面。セクション帯・サブ面 */
  --c-panel-2:     #f7f4ee;   /* パネルより少し明るい面 */
  --c-dark:        #2b241c;   /* フィルム的な深茶。ダークセクション地 */
  --c-dark-2:      #201a14;   /* ダークの一段深い版（グラデ用） */

  /* ---- テキストの階調 ---- */
  --c-muted:       #6b6459;   /* 補足テキスト */
  --c-muted-light: #938b7d;   /* さらに淡い注釈 */
  --c-on-dark:     #f3ede2;   /* ダーク地の上の文字 */
  --c-on-dark-mut: #b4a68f;   /* ダーク地の上の補足文字 */

  /* ---- アクセントの淡色・演出 ---- */
  --c-accent-tint: #efe7db;   /* アクセントを淡く敷いた面（pill背景等） */
  --c-marker:      rgba(138, 109, 74, .18);  /* マーカー（蛍光ペン）色 */
  --c-accent-glow: rgba(138, 109, 74, .16);  /* ふわっとした光 */
  --c-hairline:    rgba(26, 24, 20, .08);    /* ダーク地上の極細線 */

  /* ---- 3D/ヒーロー フォールバック用グラデ ---- */
  --grad-warm:  radial-gradient(120% 90% at 72% 18%, #e7d3b4 0%, #d9c4a5 34%, #b79a76 66%, #8a6d4a 100%);
  --grad-dark:  linear-gradient(168deg, #2b241c 0%, #201a14 62%, #171209 100%);
  --grad-panel: linear-gradient(180deg, #f7f4ee 0%, #f3efe7 100%);

  /* ---- 角丸（非対称がシグネチャー）---- */
  --r-card:   28px 10px 10px 10px;  /* 主役カードの非対称角丸 */
  --r-card-r: 10px 28px 10px 10px;  /* 反転版（ジグザグ配置用） */
  --r-soft:   14px;                 /* 汎用の穏やかな角丸 */
  --r-sm:     10px;
  --r-xs:     8px;
  --r-pill:   999px;                 /* pill・丸ボタン */

  /* ---- 罫線幅 ---- */
  --hair: 1px;   /* grid gap:1px + 背景色差で「彫る」ための基準 */

  /* ---- 書体 ---- */
  --font-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* ---- 字間 ---- */
  --ls-body:  0.02em;
  --ls-head:  0.04em;
  --ls-wide:  0.10em;
  --ls-wider: 0.24em;   /* 英字ラベル用 */

  /* ---- タイポスケール（clampで流体） ---- */
  --fs-label:  0.72rem;                              /* 英字小ラベル */
  --fs-xs:     0.78rem;
  --fs-sm:     0.86rem;
  --fs-base:   1rem;
  --fs-md:     1.06rem;
  --fs-lg:     clamp(1.12rem, 1rem + 0.5vw, 1.34rem);
  --fs-xl:     clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --fs-2xl:    clamp(1.9rem, 1.4rem + 2.2vw, 3rem);       /* セクション大見出し */
  --fs-3xl:    clamp(2.5rem, 1.6rem + 4.4vw, 5.2rem);     /* ヒーロー見出し */
  --fs-4xl:    clamp(3rem, 1.8rem + 6vw, 7rem);           /* 特大数字・CTA */

  /* ---- 余白（セクション上下ほか）---- */
  --pad-section:  clamp(72px, 6vw + 40px, 148px);
  --pad-card:     clamp(24px, 2vw + 16px, 44px);
  --gap:          clamp(16px, 1.5vw, 28px);
  --container:    1200px;
  --container-narrow: 860px;

  /* ---- 影（ウォーム寄りの淡い影）---- */
  --elev-1: 0 1px 2px rgba(43, 36, 28, .05);
  --elev-2: 0 6px 22px rgba(43, 36, 28, .07);
  --elev-3: 0 18px 48px rgba(43, 36, 28, .10);
  --elev-dark: 0 24px 60px rgba(0, 0, 0, .34);

  /* ---- トランジション ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* 全演出の共通ease */
  --t-fast: .22s var(--ease-out);
  --t-base: .4s var(--ease-out);
  --t-slow: .7s var(--ease-out);

  /* ---- ヘッダー高さ ---- */
  --header-h: 68px;

  color-scheme: light;
}

/* ダークセクション内での局所トークン上書き（文字色などを反転させたいスコープ用）。
   .is-dark を付けた領域では var() 参照だけで自動的にダーク配色になる。 */
.is-dark {
  --c-fg: var(--c-on-dark);
  --c-muted: var(--c-on-dark-mut);
  --c-line: var(--c-hairline);
  --c-card: rgba(255, 255, 255, .04);
}

/* ===== 互換エイリアス（下層ページ・adminのインラインstyleが参照する別名） ===== */
:root {
  --ff-mincho: var(--font-head);
  --ff-sans: var(--font-body);
  --ff-mono: var(--font-en);
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --c-border: var(--c-line);
  --c-bg-base: var(--c-panel);
  --c-bg-tint: var(--c-panel-2);
  --c-bg-deep: var(--c-dark);
}