/* ===========================================================
   SHISA COOKIE — Design Tokens
   公式デザインガイドライン準拠（紅緋・濃茶・海空・漆喰の4色体系）
   =========================================================== */

:root{
  /* ---------- 1. Primitive: Brand palette ---------- */
  --color-brand:           #514340;   /* ベース2：濃茶 */
  --color-accent:          #E94829;   /* メイン：紅緋（べにひ） */
  --color-aqua:            #1BB8CE;   /* アクセント：海・空 */
  --color-cream:           #FCF8ED;   /* ベース1：漆喰クリーム */

  /* ---------- 2. Primitive: Derived palette ---------- */
  --color-cream-soft:      #F4EEDD;
  --color-cream-deep:      #E9E0C6;
  --color-line:            #E5DCC8;
  --color-text-soft:       #7A6962;
  --color-white:           #FFFFFF;
  --color-accent-dark:     #C73A1E;   /* hover時のメイン暗化 */
  --color-overlay-dark:    rgba(0,0,0,.55);

  /* ---------- 3. Primitive: Flavor palette ---------- */
  --color-flavor-masu:      #E7F1F4;
  --color-flavor-beniimo:   #F1EBF6;
  --color-flavor-mango:     #FFF2DC;
  --color-flavor-coconut:   #F6F1E2;
  --color-flavor-hibiscus:  #FBE7E9;
  --color-flavor-shikuwasa: #E9F3E6;
  --color-flavor-kokuto:    #EFE1D2;
  --color-flavor-choco:     #ECE4DC;

  /* ---------- 4. Semantic ---------- */
  --bg:                    var(--color-cream);
  --bg-alt:                var(--color-cream-soft);
  --bg-deep:               var(--color-cream-deep);
  --bg-paper:              var(--color-white);
  --text:                  var(--color-brand);
  --text-muted:            var(--color-text-soft);
  --text-on-dark:          var(--color-white);
  --line:                  var(--color-line);
  --accent:                var(--color-accent);
  --accent-hover:          var(--color-accent-dark);
  --accent-2:              var(--color-aqua);

  /* ---------- 5. Type scale (1.25 ratio) ---------- */
  --fs-100: 12px;   /* caption / tag */
  --fs-200: 14px;   /* small */
  --fs-300: 16px;   /* body base */
  --fs-400: 18px;   /* lead */
  --fs-500: 22px;   /* h4 / sub-heading */
  --fs-600: 28px;   /* h3 */
  --fs-700: 36px;   /* h2 section */
  --fs-800: 48px;   /* large numeric */
  --fs-900: clamp(40px, 7vw, 72px);  /* hero */

  /* ---------- 6. Line height ---------- */
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-body:    2.0;
  --lh-loose:   2.2;

  /* ---------- 7. Letter spacing ---------- */
  --ls-tight:   .02em;
  --ls-snug:    .06em;
  --ls-wide:    .12em;
  --ls-mega:    .28em;

  /* ---------- 8. Space (8px base) ---------- */
  --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;
  --space-10: 120px;
  --space-11: 180px;

  /* ---------- 9. Layout ---------- */
  --section-py:    clamp(72px, 9vw, 130px);
  --section-py-lg: clamp(110px, 14vw, 180px);
  --section-gap:   clamp(56px, 7vw, 96px);
  --gutter:        clamp(20px, 4vw, 40px);
  --maxw:          1180px;
  --maxw-text:     680px;
  --maxw-bleed:    1400px;

  /* ---------- 10. Radius ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;

  /* ---------- 11. Shadow ---------- */
  --shadow-1: 0  4px 12px -4px  rgba(81,67,64,.12);
  --shadow-2: 0 16px 32px -16px rgba(81,67,64,.22);
  --shadow-3: 0 32px 56px -28px rgba(81,67,64,.32);

  /* ---------- 12. Motion ---------- */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-track:  cubic-bezier(.65,.05,.36,1);
  --dur-fast:    .2s;
  --dur-base:    .35s;
  --dur-slow:    .6s;

  /* ---------- 13. Fonts (公式ガイドライン準拠) ---------- */
  --font-sans:      "Yu Gothic","游ゴシック","YuGothic","Hiragino Sans",system-ui,sans-serif;
  --font-mincho:    "Yu Mincho","游明朝","YuMincho","Hiragino Mincho ProN",serif;
  --font-en:        "Cabin","Yu Gothic",system-ui,sans-serif;
  --font-en-serif:  "Libre Baskerville","Times New Roman",serif;

  /* ---------- 14. Z-index ---------- */
  --z-base:   1;
  --z-nav:    60;
  --z-header: 70;
  --z-modal:  90;
}