/* ==========================================================================
   LIFEART.lab — Design Tokens
   ブランドコンセプト設計書 v2.3 / 付録D・付録E に準拠
   Phase 2: タイポ/余白/角丸/シャドウ/トランジションを階層化
   ========================================================================== */

:root {
  /* ──────────────────────────────────────────────
     ブランドコア（ロゴの6色）
     ────────────────────────────────────────────── */
  --color-brand-rose:     #F5A8B8;
  --color-brand-coral:    #F8C8A0;
  --color-brand-violet:   #C7AEDC;
  --color-brand-mint:     #A8D8C8;
  --color-brand-sky:      #A8C8E0;
  --color-brand-lemon:    #F5E0A0;

  /* ブランドグラデーション */
  --gradient-brand: linear-gradient(135deg,
    var(--color-brand-rose) 0%,
    var(--color-brand-coral) 25%,
    var(--color-brand-lemon) 50%,
    var(--color-brand-mint) 75%,
    var(--color-brand-sky) 100%
  );
  --gradient-brand-soft: linear-gradient(135deg,
    rgba(245, 168, 184, 0.18) 0%,
    rgba(248, 200, 160, 0.18) 25%,
    rgba(245, 224, 160, 0.18) 50%,
    rgba(168, 216, 200, 0.18) 75%,
    rgba(168, 200, 224, 0.18) 100%
  );
  --gradient-line: linear-gradient(90deg,
    var(--color-brand-rose),
    var(--color-brand-coral),
    var(--color-brand-lemon),
    var(--color-brand-mint),
    var(--color-brand-sky)
  );

  /* テキスト（モダンな墨色） */
  --color-text:           #1F1B22;
  --color-text-soft:      #5A5560;
  --color-text-mute:      #9A95A0;

  /* 背景 */
  --color-bg:             #FFFFFF;
  --color-bg-soft:        #FAFAFA;
  --color-bg-pale:        #F5F5F5;
  --color-bg-cream:       #FBF8F4;

  /* 罫線 */
  --color-line:           #E8E5E2;
  --color-line-soft:      #F0EEEC;

  /* ──────────────────────────────────────────────
     アクセント
     主アクセント = sky（橋渡し語ページのデフォルト）
     coaching/wordsだけ rose 主、各事業ページは個別
     ────────────────────────────────────────────── */
  --accent-primary:       var(--color-brand-sky);
  --accent-secondary:     var(--color-brand-mint);

  --accent-coaching:      var(--color-brand-rose);
  --accent-publishing:    var(--color-brand-violet);
  --accent-organization:  var(--color-brand-mint);
  --accent-welfare:       var(--color-brand-sky);
  --accent-subsidy:       var(--color-brand-lemon);
  --accent-design:        var(--color-brand-coral);
  --accent-sns:           var(--color-brand-rose);

  --color-accent:         var(--color-brand-sky);
  --color-accent-soft:    rgba(168, 200, 224, 0.16);
  --color-accent-hover:   #7EB0D6;

  /* ──────────────────────────────────────────────
     A. タイポグラフィ
     ────────────────────────────────────────────── */
  --font-jp:        "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-jp-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en:        "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display:   "Cormorant Garamond", "Noto Serif JP", serif;

  /* タイポスケール（8段階・clamp） */
  --fs-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm:    clamp(0.875rem, 0.8rem + 0.4vw, 0.95rem);
  --fs-base:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-md:    clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-lg:    clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --fs-xl:    clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  --fs-2xl:   clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  --fs-3xl:   clamp(2.8rem, 1.6rem + 4vw, 4.4rem);

  /* 行間 */
  --lh-tight:    1.3;
  --lh-base:     1.7;
  --lh-relaxed:  1.9;
  --lh-loose:    2.1;

  /* 字間 */
  --ls-tight:    -0.01em;
  --ls-normal:   0.02em;
  --ls-wide:     0.04em;
  --ls-wider:    0.06em;

  /* ──────────────────────────────────────────────
     B. 余白スケール（8段階）
     ────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  160px;

  --section-y:        clamp(96px, 12vw, 200px);
  --container-max:    1080px;
  --container-narrow: 760px;
  --container-pad:    clamp(20px, 5vw, 40px);

  /* ──────────────────────────────────────────────
     C. 角丸・シャドウ・トランジション
     ────────────────────────────────────────────── */

  /* 角丸（5階調） */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* シャドウ（4階調） */
  --shadow-xs:  0 1px 2px rgba(42, 37, 48, 0.04);
  --shadow-sm:  0 1px 3px rgba(42, 37, 48, 0.06);
  --shadow-md:  0 4px 12px rgba(42, 37, 48, 0.08);
  --shadow-lg:  0 8px 24px rgba(42, 37, 48, 0.10);

  /* トランジション（イージング込みの一括変数） */
  --t-fast:  200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-base:  300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow:  500ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* イージング単体（reveal アニメーション用に保持） */
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

  /* レイヤー */
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;
}

/* ──────────────────────────────────────────────
   ページごとのアクセント切替（body[data-page]）
   ────────────────────────────────────────────── */
body[data-page="coaching"]      { --color-accent: var(--accent-coaching);     --color-accent-soft: rgba(245, 168, 184, 0.16); --color-accent-hover: #E88BA1; }
body[data-page="words"]         { --color-accent: var(--accent-coaching);     --color-accent-soft: rgba(245, 168, 184, 0.16); --color-accent-hover: #E88BA1; }
body[data-page="publishing"]    { --color-accent: var(--accent-publishing);   --color-accent-soft: rgba(199, 174, 220, 0.16); --color-accent-hover: #B594CD; }
body[data-page="organization"]  { --color-accent: var(--accent-organization); --color-accent-soft: rgba(168, 216, 200, 0.20); --color-accent-hover: #88C8B2; }
body[data-page="welfare"]       { --color-accent: var(--accent-welfare);      --color-accent-soft: rgba(168, 200, 224, 0.20); --color-accent-hover: #7EB0D6; }
body[data-page="subsidy"]       { --color-accent: var(--accent-subsidy);      --color-accent-soft: rgba(245, 224, 160, 0.22); --color-accent-hover: #DEC474; }
body[data-page="design"]        { --color-accent: var(--accent-design);       --color-accent-soft: rgba(248, 200, 160, 0.22); --color-accent-hover: #E5A878; }
body[data-page="sns"]           { --color-accent: var(--accent-sns);          --color-accent-soft: rgba(245, 168, 184, 0.16); --color-accent-hover: #E88BA1; }