/* ==========================================================================
   tokens-2026.css — アイリィデザイン (和風クリーン / and-u 寄せ)
   白ベース・高コントラスト・控えめアクセント・Noto Sans JP 主体
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color — ほぼ白 × 濃紺黒 × 控えめベージュピンク
     ------------------------------------------------------------------ */
  --c-bg: #ffffff;                /* メインは純白 */
  --c-bg-alt: #faf8f5;            /* セクション区切り (ほんのりクリーム) */
  --c-bg-warm: #f3f0ea;           /* もう一段濃いグレージュ */
  --c-bg-dark: #1a1a20;           /* 黒系背景 (フッタ・CTA band) */
  --c-surface: #ffffff;
  --c-surface-alt: #fafaf7;

  --c-text: #1a1a20;              /* 濃黒 (純黒より少し柔らかく) */
  --c-text-strong: #000000;       /* 本気の強調 */
  --c-text-muted: #6a6a72;        /* キャプション */
  --c-text-weak: #a8a8ae;         /* 補足 */
  --c-text-invert: #ffffff;

  /* 罫線用 (極細 / 和風の余白感を作る) */
  --c-line: #e6e3dc;
  --c-line-soft: #efece5;

  /* ブランドピンク (ダスティピンク) — CTA と アクセントで使う */
  --c-primary: #c78b8b;           /* Dusty Pink (主CTA) */
  --c-primary-hover: #b47474;     /* hover 濃い */
  --c-primary-ink: #8b5656;       /* 文字強調 / 濃色アクセント */
  --c-primary-soft: #f4e2e2;      /* 薄ピンク背景 */
  --c-primary-veil: #fbeeee;      /* さらに薄い (セクション地) */

  /* 黒系 (ボタン2nd / テキスト) */
  --c-ink: #1a1a20;
  --c-ink-hover: #000000;

  --c-accent: #b8927c;            /* ベージュ (微アクセント) */
  --c-accent-soft: #f0e6dd;
  --c-accent-ink: #8a6a55;

  --c-success: #3c6e4a;
  --c-danger: #a94a4a;

  /* ------------------------------------------------------------------
     Typography — Noto Sans JP 主体、見出しはやや太め
     ------------------------------------------------------------------ */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-display: "Noto Sans JP", "Hiragino Sans", sans-serif; /* 見出しもゴシックで */

  --fz-xs: 11px;
  --fz-sm: 12px;
  --fz-base: 14px;
  --fz-md: 15px;
  --fz-lg: 17px;
  --fz-xl: 20px;
  --fz-2xl: 24px;
  --fz-3xl: 30px;
  --fz-4xl: 40px;
  --fz-5xl: 56px;

  --lh-tight: 1.3;
  --lh-snug: 1.55;
  --lh-base: 1.8;
  --lh-loose: 2;

  --lt-tight: 0.01em;
  --lt-base: 0.03em;         /* 日本語はやや広めで読みやすく */
  --lt-wide: 0.15em;         /* 英字eyebrow用 */
  --lt-x-wide: 0.25em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ------------------------------------------------------------------
     Spacing — 余白を大きめに (和風の「間」)
     ------------------------------------------------------------------ */
  --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: 128px;
  --space-11: 160px;

  /* ------------------------------------------------------------------
     Radius — 和風クリーン (角立て気味)
     ------------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ------------------------------------------------------------------
     Accent Colors — ダスティ系にトーンを揃えた落ち着いた配色
     主CTAはダスティピンク、他はくすんだ色でにぎやかしつつ調和
     ------------------------------------------------------------------ */
  /* 赤系 (コーラル): バッジ/急ぎ */
  --c-red: #c47a7a;
  --c-red-hover: #b06767;
  --c-red-soft: #f4e2e2;
  --c-red-ink: #8a4a4a;

  /* オレンジ系 (ピーチ): キャンペーン */
  --c-orange: #d99565;
  --c-orange-hover: #c27f50;
  --c-orange-soft: #f5e4d5;
  --c-orange-ink: #8e5428;

  /* 黄系 (マスタード): 注目/お得 */
  --c-yellow: #d9b86a;
  --c-yellow-hover: #c2a150;
  --c-yellow-soft: #f5ecd5;
  --c-yellow-ink: #6e5218;

  /* 緑系 (セージ): 無料/安心 */
  --c-green: #89a589;
  --c-green-hover: #6e8c6f;
  --c-green-soft: #e1ebe1;
  --c-green-ink: #426045;

  /* 青系 (ダスティブルー): 情報/詳細 */
  --c-blue: #8aa5c0;
  --c-blue-hover: #6e8ca8;
  --c-blue-soft: #e0e8f0;
  --c-blue-ink: #3e5a78;

  /* ------------------------------------------------------------------
     Shadow — 控えめ、ほぼ border 代わり
     ------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card: 0 6px 24px -8px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.12);
  --shadow-hover: 0 12px 32px -8px rgba(0,0,0,0.15);

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --container-max: 1200px;
  --container-narrow: 900px;
  --container-wide: 1360px;
  --header-h: 72px;
  --sticky-bar-h: 72px;
  --z-header: 100;
  --z-sticky: 90;
  --z-modal: 200;

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

@media (max-width: 767px) {
  :root {
    --fz-3xl: 24px;
    --fz-4xl: 30px;
    --fz-5xl: 40px;
    --space-9: 64px;
    --space-10: 80px;
    --space-11: 96px;
  }
}