/* ==========================================================
   variables.css — デザイントークン（紬 TSUMUGI）
   ここを変えるだけでサイト全体のデザインが変わる
   ========================================================== */

:root {

  /* ── Colors: Japanese Traditional ─────────────────────── */
  --c-bg:         #F8F4E8;  /* 生成色   きなり     晒していない絹の色  */
  --c-bg-sub:     #F2EDE3;  /* 白練色   しろねり   練り絹のオフホワイト */
  --c-surface:    #EDE5D6;  /* 砥粉色   とのこ     砥石の粉、土の色    */
  --c-border:     #D4CEC6;  /* 鳩羽鼠   はとばねず 鳩の羽のグレー      */

  --c-text:       #2B2B2B;  /* 墨色     すみ       磨り墨の深い黒      */
  --c-text-sub:   #6E6B65;  /* 薄墨色   うすずみ   水で薄めた墨        */
  --c-text-muted: #9E9A93;  /* 利休鼠   りきゅう   枯れたグレー        */

  /* アクセント（1変数を変えるだけで全体が変わる） */
  --c-accent:     #2B2B2B;  /* 墨（デフォルト） */
  --c-accent-h:   #4A4A4A;  /* ホバー */
  --c-accent-lt:  #EDE5D6;  /* 薄め（砥粉色） */
  --c-white:      #FFFFFF;

  /* Semantic */
  --c-success:    #3A6B4A;  /* 常盤色 ときわ */
  --c-warning:    #B8860B;  /* 山吹色 やまぶき */
  --c-error:      #8B2E2E;  /* 臙脂色 えんじ */

  /* ── Typography ────────────────────────────────────────── */

  /* フォントファミリー（font-switcher で切替） */
  --f-sans:  'Inter', 'Noto Sans JP', system-ui, sans-serif;
  --f-serif: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
  --f-body:  var(--f-sans);  /* ← font-switcher が上書き */
  --f-head:  var(--f-sans);

  /* フォントサイズ（最小 1rem = 16px を厳守） */
  --fs-sm:   1rem;           /* 16px ── 絶対最小値 */
  --fs-base: 1.0625rem;      /* 17px ── 本文デフォルト */
  --fs-md:   1.25rem;        /* 20px */
  --fs-lg:   1.5rem;         /* 24px */
  --fs-xl:   2rem;           /* 32px */
  --fs-2xl:  2.75rem;        /* 44px */
  --fs-3xl:  3.75rem;        /* 60px */
  --fs-4xl:  3.25rem;        /* 52px */
  --fs-hero: clamp(2.75rem, 5.5vw, 5rem);
  --fs-lead: clamp(1.75rem, 3.5vw, 3rem);

  /* 行間 */
  --lh-tight: 1.25;
  --lh-snug:  1.5;
  --lh-body:  1.85;   /* 日本語本文の最適値 */
  --lh-loose: 2.1;

  /* 字間（日本語は少し開けると読みやすい） */
  --ls-tight:  -0.01em;
  --ls-normal:  0.04em;
  --ls-wide:    0.10em;
  --ls-wider:   0.20em;

  /* ── Spacing（4px基準） ──────────────────────────────── */
  --sp-1:  0.25rem;   /*   4px */
  --sp-2:  0.5rem;    /*   8px */
  --sp-3:  0.75rem;   /*  12px */
  --sp-4:  1rem;      /*  16px */
  --sp-5:  1.25rem;   /*  20px */
  --sp-6:  1.5rem;    /*  24px */
  --sp-8:  2rem;      /*  32px */
  --sp-10: 2.5rem;    /*  40px */
  --sp-12: 3rem;      /*  48px */
  --sp-14: 3.5rem;    /*  56px */
  --sp-16: 4rem;      /*  64px */
  --sp-20: 5rem;      /*  80px */
  --sp-24: 6rem;      /*  96px */
  --sp-32: 8rem;      /* 128px */

  --section-py: clamp(5rem, 9vw, 9rem);

  /* ── Layout ─────────────────────────────────────────── */
  --container:    1240px;
  --container-sm:  720px;
  --gutter:       clamp(1.25rem, 3vw, 2rem);
  --header-h:     72px;

  /* ── Border & Radius ────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --border:      1px solid var(--c-border);

  /* ── Shadow（控えめ） ──────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(43,43,43,.06);
  --shadow-md: 0 4px 16px rgba(43,43,43,.08);
  --shadow-lg: 0 16px 48px rgba(43,43,43,.10);

  /* ── Animation（品のある動き） ─────────────────────── */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:     cubic-bezier(0.87, 0, 0.13, 1);
  --dur-fast:    180ms;
  --dur-normal:  360ms;
  --dur-slow:    640ms;
}

/* ── Font: Serif Mode ────────────────────────────────── */
html.font-serif {
  --f-body: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
  --f-head: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
  --lh-body:   2.0;    /* セリフは行間をより広く */
  --ls-normal: 0.06em;
}

/* ── BG Theme: White ─────────────────────────────────── */
html.theme-white {
  --c-bg:      #FFFFFF;
  --c-bg-sub:  #F8F8F6;
  --c-surface: #F2F2F0;
  --c-white:   #FFFFFF;
  --c-border:  rgba(43,43,43,.10);
}

/* ── BG Theme: Stone ─────────────────────────────────── */
html.theme-stone {
  --c-bg:      #EDE9E1;
  --c-bg-sub:  #E5E0D8;
  --c-surface: #DAD5CC;
  --c-white:   #F5F2EC;
}