/**
 * ねいろクレイ デザイントークン
 * コンセプト: あたたかいポップ×ソフト3D。
 * パステル暖色の粘土(クレイ)のような、触りたくなる立体感と丸み。
 * このファイルが色・深度・モーションの唯一の正。コンポーネントは必ずトークン経由で参照する。
 */

:root {
  /* ---- カラー: 地と図 ---- */
  --paper: #fdf6ec;            /* ページ地: あたたかいクリーム */
  --paper-deep: #f7ecdc;       /* セクション差し色の地 */
  --surface: #fffdf8;          /* カード表面 */
  --ink: #4d4439;              /* 本文: 焦げ茶グレー(真っ黒を使わない) */
  --ink-soft: #857763;         /* 補助テキスト */
  --ink-faint: #b3a48f;        /* プレースホルダ・境界 */

  /* ---- カラー: クレイパレット(アセットのパステル準拠) ---- */
  --clay-pink: #f7aec2;
  --clay-pink-deep: #ec8aa6;
  --clay-orange: #f7b778;
  --clay-orange-deep: #ee9c55;
  --clay-yellow: #f8de8d;
  --clay-yellow-deep: #efcb63;
  --clay-sky: #a9d7f2;
  --clay-sky-deep: #7fbee6;
  --clay-mint: #a7e3d2;
  --clay-mint-deep: #79d0b8;
  --clay-green: #7fcf8e;
  --clay-green-deep: #5cb96e;

  /* ---- セマンティック ---- */
  --action: var(--clay-orange-deep);          /* 主アクション(投稿・検索) */
  --action-soft: var(--clay-orange);
  --agree: var(--clay-pink-deep);             /* 「わかる」投票 */
  --agree-soft: var(--clay-pink);
  --hmm: var(--clay-sky-deep);                /* 「うーん」投票: 危険色ではなく涼しい色(否定を罰にしない) */
  --hmm-soft: var(--clay-sky);
  --success: var(--clay-green);
  --link: #4f96c9;

  /* ---- クレイの立体感(署名レシピ) ----
     上面ハイライト + 内側の底影 + 暖色の落ち影 の3層で「柔らかい厚み」を作る */
  --clay-highlight: inset 2px 2px 6px rgba(255, 255, 255, 0.9);
  --clay-inner-shade: inset -3px -4px 8px rgba(214, 182, 150, 0.18);
  --clay-drop: 6px 10px 24px rgba(214, 166, 122, 0.22), 1px 2px 4px rgba(214, 166, 122, 0.14);
  --clay-drop-hover: 10px 16px 34px rgba(214, 166, 122, 0.28), 2px 3px 6px rgba(214, 166, 122, 0.16);
  --clay-drop-pressed: 2px 3px 8px rgba(214, 166, 122, 0.18);
  --shadow-clay: var(--clay-highlight), var(--clay-inner-shade), var(--clay-drop);
  --shadow-clay-hover: var(--clay-highlight), var(--clay-inner-shade), var(--clay-drop-hover);
  --shadow-clay-pressed: var(--clay-highlight), var(--clay-inner-shade), var(--clay-drop-pressed);
  --surface-clay: linear-gradient(145deg, #fffefa 0%, #fbf3e6 100%);

  /* ---- 丸み ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- 余白スケール ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* ---- タイポグラフィ ---- */
  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDGothic",
    "Yu Gothic UI", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --text-hero: clamp(1.9rem, 1.4rem + 2.6vw, 3.1rem);

  /* ---- モーション ----
     spring: 少しだけ跳ねて止まる。UIの「粘土をつまむ」手応え */
  --ease-spring: linear(
    0, 0.008 1.1%, 0.031 2.2%, 0.129 4.8%, 0.257 7.2%, 0.671 13.9%,
    0.789 16.5%, 0.881 19.2%, 0.957 22.4%, 1.005 25.9%, 1.033 30.5%,
    1.038 36.4%, 1.026 44.3%, 1.006 57.5%, 0.999 68.8%, 1
  );
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  /* ---- レイヤー ---- */
  --z-deco: 0;
  --z-content: 1;
  --z-header: 50;
  --z-toast: 100;
}