/* ==========================================================================
   tokens.css — DESIGN.md と1対1で対応するデザイントークン
   値を変更する場合は必ず DESIGN.md を先に更新すること
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Base ------------------------------------------------------------ */
  --color-bg:            #FBF6EA;
  --color-bg-alt:        #F5EEDD;
  --color-surface:       #FFFDF7;
  --color-border:        #E4DACA;
  --color-border-strong: #CFC2AB;

  /* --- Text ------------------------------------------------------------ */
  --color-text:        #3A2E24;
  --color-text-muted:  #6B5B4B;
  --color-text-faint:  #756455;  /* bg 5.25:1 / bg-alt 4.89:1 — 小さい注記でもAA合格 */
  --color-text-invert: #FBF6EA;

  /* --- Sage（プライマリ） ----------------------------------------------- */
  --sage-50:  #F0F3EE;
  --sage-100: #DFE7DC;
  --sage-200: #C4D2BF;
  --sage-300: #A4B89E;
  --sage-400: #839B7C;
  --sage-500: #66815F;
  --sage-600: #4F6A57;
  --sage-700: #3E5445;
  --sage-800: #2F4034;

  /* --- Mustard（アクセント） -------------------------------------------- */
  --mustard-100: #F7ECD2;
  --mustard-300: #EBC97E;
  --mustard-500: #D9A02B;
  --mustard-700: #A8761A;
  --mustard-800: #7A5410;  /* mustard-100 の面に乗せる小さい文字用（5.76:1） */

  /* --- Salmon（装飾専用） ----------------------------------------------- */
  --salmon-200: #F6DCD1;
  --salmon-400: #E8A08A;
  --salmon-600: #C4664A;

  /* --- Semantic --------------------------------------------------------- */
  --color-primary:       var(--sage-600);
  --color-primary-hover: var(--sage-700);
  --color-accent:        var(--mustard-500);
  --color-focus:         var(--mustard-700);
  --color-line-brand:    #06C755;

  --shadow-card:  0 1px 2px rgba(58, 46, 36, .04);
  --shadow-lift:  0 4px 16px rgba(58, 46, 36, .08);
  --shadow-float: 0 8px 32px rgba(58, 46, 36, .10);

  /* --- Typography ------------------------------------------------------- */
  --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-num:   "Inter", -apple-system, "Helvetica Neue", sans-serif;

  --fs-display: clamp(2.125rem, 1.3rem + 3.6vw, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --fs-body:    clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-small:   .875rem;
  --fs-caption: .8125rem;
  --fs-stat:    clamp(2.75rem, 1.5rem + 5vw, 5rem);
  --fs-label:   .75rem;

  --lh-display: 1.4;
  --lh-h2:      1.45;
  --lh-h3:      1.6;
  --lh-lead:    1.85;
  --lh-body:    1.9;

  /* --- Spacing ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  --section-py: var(--space-20);

  /* --- Layout ----------------------------------------------------------- */
  --container:      1120px;
  --container-text: 720px;
  --gutter:         20px;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-py: var(--space-24);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-py: var(--space-32);
    --header-h: 80px;
  }
}