/* =====================================================================
   lisas atelier ― 共通ルールの変数（tokens.css）
   デザイン担当 2026-10-31。説明は design.md の「共通ルール」。
   世界観：「ポップな部屋の、クリームの壁」。今のサイトの HERO（カラフルなアトリエの部屋）の色から決めた
     （karte.md「決まったこと」：色合いは HERO に合わせる）。地は今のサイトのクリーム、文字は紺、
     主なボタンは部屋の青い壁の青、丸いハイライトの輪は部屋のクッションのピンク、確認中の印は黄色。
   - 変数の名前は変えない・消さない（どの部品もこの名前を使っている）。足した変数は design.md「足した変数」。
   - 部品はここにある変数だけを使う。色・フォント・サイズを足さない（足りないときは社長へ）。
   - 値を変えるのはデザイン担当だけ（実装担当もテーマで値を変えない）。
   - フォントの名前を変えたら、fonts/fonts.css も作り直す（fonts/README.md）。
   - ライトの --color-bg を変えたら、nav/index.html の theme-color の meta も同じ色にする（ナビ担当）。
   - ライト：:root ／ ダーク：[data-theme="dark"] と、iPhoneの設定がダークで
     data-theme="light" を選んでいないとき。ダークの値は2か所に同じものを書いている
     （片方だけ直さない）。
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---------- 色（ライト）。（ ）の数字は --color-bg に対するコントラスト ---------- */
  --color-bg: #FFF8E9;            /* ページの地（クリーム。今のサイトの地 --cream と同じ） */
  --color-bg-sub: #FFF0E9;        /* 一段沈んだ地（案内の囲み・フッター。今のサイトの #details の地） */
  --color-surface: #FFFDF6;       /* カード・チップ・入力欄の地（今のサイトの --paper） */
  --color-mat: #F6EFDF;           /* 写真の台紙（空の枠・HERO の額の中の地。今のサイトの .mat） */
  --color-text: #173B62;          /* 文字（紺。今のサイトの --ink）(10.8) */
  --color-text-sub: #4F6580;      /* 補足の文字（どの地でも 5.0 以上） */
  --color-border: #E6DECE;        /* 区切りの線・カードのふち（飾り） */
  --color-border-strong: #7C8797; /* 入力欄・チップのふち（3.4。どの地でも 3.0 以上） */
  --color-accent: #E8457F;        /* 差し色のピンク：輪・小さな印・線だけ。文字には使わない (3.6) */
  --color-accent-text: #B8235F;   /* 差し色の文字（英字の小見出しなど。ラズベリー）(5.8) */
  --color-accent-soft: #FFE4EE;   /* 差し色のうすい地（うすいピンク） */
  --color-primary: #0270B8;       /* 主なボタン・選んだチップの地（HERO の青い壁の色） */
  --color-primary-hover: #09346A; /* PCで乗せたとき（紺。今のサイトの --blue-deep） */
  --color-on-primary: #FFFDF6;    /* 主なボタンの文字（青の地で 5.1） */
  --color-ring: #E8457F;          /* 丸いハイライト・プロフィールの輪（ピンク） */
  --color-focus: #09346A;         /* フォーカスの線（紺）(11.6) */
  --color-tbd-text: #6B4D00;      /* 確認中の印：文字（地で 6.9） */
  --color-tbd-bg: #FFF1C7;        /* 確認中の印：地（うすい黄色。今のサイトの --yellow から） */
  --color-tbd-line: #A87E00;      /* 確認中の印：点線のふち */
  --color-line-green: #06C755;    /* このお客様では使わない（窓口は Instagram DM）。名前を残す決まりなので消さない */
  --color-dm: #E8457F;            /* 「DM で相談」の丸い印の地（ピンク。中の紙ひこうきはいつもクリーム #FFFDF6 で base.css の絵に入っている）【足した】 */
  --color-scrim: rgba(9, 28, 56, .55);    /* 小部屋（PC）・メニューの後ろ */
  --color-lightbox: #0B1220;              /* 拡大表示の地（ライト・ダーク共通。紺に近い黒） */
  --color-on-photo: rgba(11, 18, 32, .5); /* 写真の上に置く丸いボタンの地 */
  --color-on-photo-text: #FFFDF6;

  /* ---------- 影（紺をうすく） ---------- */
  --shadow-1: 0 1px 2px rgba(9, 52, 106, .06), 0 6px 16px -10px rgba(9, 52, 106, .22); /* カード */
  --shadow-2: 0 16px 40px -18px rgba(9, 52, 106, .45);  /* 浮いているもの（下のボタン・シート・HERO のしるし） */

  /* ---------- フォント（fonts/fonts.css で読み込む。どれも SIL OFL 1.1） ---------- */
  /* 見出し（h1〜h4・カードの名前・小部屋の名前）：Kiwi Maru 500（やわらかい丸い明朝） */
  --font-serif: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  /* 本文・ボタン：英字と数字は DM Sans（今のサイトの本文の英字と同じ）、日本語は Zen Kaku Gothic New（400・700） */
  --font-sans: "DM Sans", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  /* 英字の小見出し・ロゴ・プロフィールの名前：DM Serif Display 400・400斜体（写真の「LISA」と同じ系統のセリフ体） */
  --font-en: "DM Serif Display", Georgia, "Times New Roman", "Kiwi Maru", serif;
  /* 大きな数字（料金・件数・手順の番号）：DM Sans 700（lining-nums tabular-nums） */
  --font-num: "DM Sans", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --fw-head: 500;
  --fw-body: 400;
  --fw-bold: 700;
  --fw-en: 400;
  --fw-num: 700;

  /* ---------- 文字の大きさ（iPhone。PCは下の min-width: 768px） ---------- */
  --fs-xs: 12px;     /* 注意書き・タグ・確認中の印・ハイライトの名前（これより小さくしない） */
  --fs-sm: 13px;     /* 補足・チップ・リード・近道 */
  --fs-base: 15px;   /* 本文・ボタン */
  --fs-md: 17px;     /* カードの名前・小見出し(h3) */
  --fs-lg: 22px;     /* セクションの見出し(h2) */
  --fs-xl: 25px;     /* ページで1つの大見出し(h1：プロフィールの名前)・小部屋の名前 */
  --fs-num: 28px;    /* 料金の数字（DM Sans 700 は字が太いので少し小さめ） */
  --fs-en: 17px;     /* 英字の小見出し（DM Serif Display 斜体） */
  --fs-logo: 19px;   /* 上の帯のロゴ */
  --fs-logo-lg: 26px; /* フッターのロゴ */
  --fs-input: 16px;  /* 入力欄（16px未満だとiPhoneで画面が拡大される） */

  /* 行の高さ・字間 */
  --lh-body: 1.85;   /* 本文 */
  --lh-snug: 1.7;    /* カードの中・リスト・よくある質問 */
  --lh-head: 1.45;   /* 見出し */
  --lh-tight: 1.3;   /* ボタン・チップ・数字 */
  --ls-body: .03em;
  --ls-head: .05em;
  --ls-en: .02em;    /* DM Serif Display は字間を広げない */
  --ls-btn: .06em;

  /* ---------- 余白 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter: 20px;     /* 画面の左右の余白 */
  --sec-space: 72px;  /* セクションとセクションの間 */
  --head-gap: 24px;   /* セクションの見出しから中身まで */
  --card-pad: 20px;   /* カードの内側 */
  --card-gap: 16px;   /* カードとカードの間 */
  --grid-gap: 3px;    /* 3列の写真一覧のすき間 */
  --w-text: 640px;    /* 文章が中心の所の最大幅 */
  --w-main: 960px;    /* プロフィール・一覧・カードの最大幅 */
  --w-room: 1040px;   /* PCの小部屋の最大幅 */

  /* ---------- 大きさ ---------- */
  --tap: 44px;        /* 押せるものの最小（幅・高さ） */
  --btn-h: 48px;      /* ボタンの高さ */
  --btn-h-lg: 52px;   /* 下に固定の「DM で相談」・相談文づくりの送るボタン */
  --chip-h: 44px;     /* チップの高さ */
  --icon: 20px;       /* アイコン（線1.5px） */
  --nav-h: 92px;      /* 上に固定の帯の高さ（iPhone：ロゴの段48＋近道の段44） */
  --cta-bar: 76px;    /* 下に固定のボタンの場所（上下12＋ボタン52）。safe-areaは別 */
  --page-bottom: calc(var(--cta-bar) + env(safe-area-inset-bottom, 0px) + var(--space-4)); /* ページの下に足す余白 */
  --avatar: 84px;     /* プロフィールの丸い写真 */
  --hl-size: 72px;    /* 丸いハイライト */
  --thumb: 64px;      /* 小部屋のサムネイル */
  --ring-w: 2px;      /* 丸の輪の太さ */
  --ring-gap: 3px;    /* 輪と写真のすき間 */
  --hero-peek: 56px;  /* HERO の下に見える、次の段（#top）の頭の高さの目安（HERO担当が見本で測って決める）【足した】 */

  /* ---------- 角の丸み ---------- */
  --radius-xs: 6px;      /* 確認中の印 */
  --radius-sm: 10px;     /* 入力欄・サムネイル・囲み */
  --radius-md: 14px;     /* よくある質問の1問・小さな囲み */
  --radius-lg: 20px;     /* カード */
  --radius-xl: 28px;     /* PCの小部屋・大きなシート */
  --radius-photo: 12px;  /* 1枚で見せる写真（カードの外で見せるとき） */
  --radius-pill: 999px;  /* ボタン・チップ・タグ */

  /* ---------- 写真の枠（縦横比） ---------- */
  --ratio-1x1: 1 / 1;      /* 正方形：小部屋の大きな写真・サムネイル・丸（写真はどれも正方形） */
  --ratio-3x4: 3 / 4;      /* 縦 3:4：#works の3列の一覧（Instagram のマスと同じ）【足した】 */
  --ratio-4x3: 4 / 3;      /* 横：このお客様ではふつう使わない（名前を残す） */
  --ratio-4x5: 4 / 5;      /* 縦：縦の写真を大きく見せる所（いまは使う所なし） */
  --ratio-hero: 493 / 768; /* HERO の部屋の絵（photos/site-hero-room*.jpg。切らずに全部）【足した】 */

  /* ---------- 動き ---------- */
  --dur-fast: 160ms;   /* 押した・選んだ */
  --dur-base: 280ms;   /* 薄く出る・写真の切り替え・開け閉め */
  --dur-close: 380ms;  /* 小部屋が丸に戻る */
  --dur-slow: 520ms;   /* 丸がふくらんで小部屋になる */
  --dur-hero: 5000ms;       /* HERO：18枚が額に入りきるまで（今のサイトと同じ 5.0秒）【足した】 */
  --dur-hero-frame: 340ms;  /* HERO：額1枚が入る時間（今のサイトは 0.32〜0.34秒）【足した】 */
  --ease-out: cubic-bezier(.22, .8, .24, 1);  /* ふわっと止まる（基本） */
  --ease-in-out: cubic-bezier(.62, 0, .3, 1); /* 戻る・閉じる */

  /* ---------- 重なりの順 ---------- */
  --z-nav: 40;
  --z-cta: 45;
  --z-menu: 50;
  --z-room: 60;
  --z-lightbox: 70;
  --z-toast: 80;
}

/* ---------- ダーク（自分で選んだとき）：「夜のアトリエ」紺の地にクリームの文字 ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0F1A2C;
  --color-bg-sub: #14223A;
  --color-surface: #1A2B45;
  --color-mat: #21324F;
  --color-text: #FBF4E4;
  --color-text-sub: #B9C4D4;
  --color-border: #2D4060;
  --color-border-strong: #7A8CAA;
  --color-accent: #FF6FA6;
  --color-accent-text: #FF9CC3;
  --color-accent-soft: #3A2140;
  --color-primary: #7CC4F2;
  --color-primary-hover: #A6D8F7;
  --color-on-primary: #0F1A2C;
  --color-ring: #FF6FA6;
  --color-focus: #FFD24D;
  --color-tbd-text: #FFDD80;
  --color-tbd-bg: #3A3112;
  --color-tbd-line: #B58F1E;
  --color-scrim: rgba(0, 0, 0, .62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 18px 44px -16px rgba(0, 0, 0, .8);
}

/* ---------- ダーク（iPhoneの設定がダークで、ライトを選んでいないとき）※上と同じ値 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0F1A2C;
    --color-bg-sub: #14223A;
    --color-surface: #1A2B45;
    --color-mat: #21324F;
    --color-text: #FBF4E4;
    --color-text-sub: #B9C4D4;
    --color-border: #2D4060;
    --color-border-strong: #7A8CAA;
    --color-accent: #FF6FA6;
    --color-accent-text: #FF9CC3;
    --color-accent-soft: #3A2140;
    --color-primary: #7CC4F2;
    --color-primary-hover: #A6D8F7;
    --color-on-primary: #0F1A2C;
    --color-ring: #FF6FA6;
    --color-focus: #FFD24D;
    --color-tbd-text: #FFDD80;
    --color-tbd-bg: #3A3112;
    --color-tbd-line: #B58F1E;
    --color-scrim: rgba(0, 0, 0, .62);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 18px 44px -16px rgba(0, 0, 0, .8);
  }
}

/* ---------- PC・タブレット（768px〜） ---------- */
@media (min-width: 768px) {
  :root {
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 28px;
    --fs-xl: 32px;
    --fs-num: 32px;
    --fs-en: 19px;
    --fs-logo: 22px;
    --fs-logo-lg: 30px;

    --gutter: 32px;
    --sec-space: 112px;
    --head-gap: 32px;
    --card-pad: 24px;
    --card-gap: 24px;
    --grid-gap: 6px;

    --nav-h: 64px;      /* 1段（ロゴ・近道・ライト／ダーク・メニュー） */
    --avatar: 128px;
    --hl-size: 88px;
    --thumb: 80px;
  }
}

/* ---------- 広いPC（1024px〜） ---------- */
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
  }
}

/* ---------- 動きを控えめにする設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-close: 1ms;
    --dur-slow: 1ms;
    --dur-hero: 1ms;        /* HERO は動かさず、はじめから完成した絵（HERO担当の script も matchMedia で見る） */
    --dur-hero-frame: 1ms;
  }
}

/* ---------- コントラストを上げる設定（iPhone「コントラストを上げる」）。ライト・ダークどちらにも効く ---------- */
@media (prefers-contrast: more) {
  :root,
  :root:not([data-theme="light"]) {
    --color-text-sub: var(--color-text);
    --color-border: var(--color-border-strong);
  }
}