/* ============================================================
   Kanana Studio — 共有デザイントークン
   ------------------------------------------------------------
   サイト全体の配色はこのファイルだけを編集すれば変わります。
   各ページは自前の :root で「自分の変数名 → --ks-* 」を参照する形。
   例) :root{ --accent: var(--ks-accent, #267b7d); }
   ※ 各ページ側には必ずフォールバック値を書いてあるため、
     このファイルの読み込みに失敗しても表示は壊れません。
   ============================================================ */

:root {
  /* 地・面 */
  --ks-bg:        #f6f4ec;  /* ページ背景（クリーム） */
  --ks-surface:   #fffdf6;  /* カード・パネル */
  --ks-surface-2: #fbf8ef;  /* 一段落とした面 */

  /* 罫線 */
  --ks-border:    #e3ddcd;
  --ks-hair:      #eae4d6;  /* より淡い罫線 */

  /* アクセント（ティール） */
  --ks-accent:    #267b7d;
  --ks-accent-2:  #1d6365;  /* hover・濃色 */
  --ks-soft:      #e7f0ec;  /* アクセントの淡色地 */

  /* 文字（補足色は背景#f6f4ec上で WCAG AA 4.5:1 を満たすよう調整）*/
  --ks-ink:       #33362f;  /* 本文 */
  --ks-muted:     #5b5e54;  /* 補足（約5.6:1）*/
  --ks-muted-2:   #6f7267;  /* さらに淡い補足（約4.5:1）*/

  /* 影 */
  --ks-shadow:    0 4px 20px rgba(51, 54, 47, .07);
  --ks-shadow-2:  0 12px 36px rgba(51, 54, 47, .12);
}

/* ============================================================
   さりげない動き（共有）
   - すべて prefers-reduced-motion で無効化
   - スクロール登場は @supports でガード → 非対応ブラウザは常に表示
     （コンテンツが隠れたままになる事故を防ぐ）
   ============================================================ */

/* ページ表示時のやわらかいフェードイン */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ks-page-in { from { opacity: 0; } to { opacity: 1; } }
  body { animation: ks-page-in .5s cubic-bezier(.2,.7,.2,1) both; }
}

/* ページ遷移のクロスフェード（Chrome/Edge。非対応ブラウザは無視される） */
@view-transition { navigation: auto; }

/* スクロールに合わせてカードがそっと浮き上がる（対応ブラウザのみ） */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes ks-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
    main > .hero,
    main > .card {
      animation: ks-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 18%;
    }
  }
}