@charset "utf-8";

/* =========================================
   going design tokens
   - 全ページ共通（色/余白/角丸/影/文字/アニメ）
========================================= */

:root{
  /* ---------- Typography ---------- */
  /* まずはシステムフォント推奨（表示速度・崩れに強い）
     Google Fonts を入れるなら "Noto Sans JP" を先頭に足す */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

  /* 重さは “使う種類を絞る” のがコツ（3段階くらい） */
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.25;
  --lh-base: 1.9;

  /* ---------- Layout ---------- */
  --container-lg: 1280px;
  --container-md: 1100px;
  --container-sm: 980px;

  /* ---------- Radius ---------- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-card: 26px; /* 大きめカード */
  --r-sns: var(--r-sm); /* SNSアイコン等（12px） */

  /* ---------- Spacing (8px scale) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* ---------- Colors ---------- */
  --c-text: #3d3732;
  --c-muted: rgba(0,0,0,.58);
  --c-muted-2: rgba(0,0,0,.66);
  --c-line: rgba(0,0,0,.08);
  --c-card: rgba(255,255,255,.86);

  /* ブランド（ピンク） */
  --c-accent: #ee8faf;
  --c-accent-2: #ff8fba;
  --c-accent-3: #ffb6d0;
  --c-accent-soft: rgba(240,145,179,.14);
  --c-accent-line: rgba(240,145,179,.18);

  /* 背景 */
  --c-bg: #fff;
  --c-bg-soft: #fff6f9;

  /* ---------- Shadows ---------- */
  --sh-xs: 0 10px 22px rgba(0,0,0,.06);
  --sh-sm: 0 12px 30px rgba(0,0,0,.06);
  --sh-md: 0 18px 50px rgba(0,0,0,.08);
  --sh-lg: 0 24px 70px rgba(0,0,0,.10);

  /* ---------- Gradients ---------- */
  --g-accent: linear-gradient(180deg, var(--c-accent-3) 0%, var(--c-accent-2) 100%);
  --g-surface: linear-gradient(180deg, #ffffff 0%, var(--c-bg-soft) 100%);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --tr-fast: .18s var(--ease-out);
  --tr-mid:  .32s var(--ease-out);
  --tr-slow: .48s var(--ease-out);

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(238,143,175,.28);

  /* ---------- Font size（よく使う値を先にトークン化） ---------- */
  --fs-kicker: .8rem;     /* 小見出し・ラベル */
  --fs-base: 15px;        /* 基準テキスト（px指定の置換用） */
  --fs-subhead: 1.3rem;   /* 中見出し */

  /* ---------- Letter spacing（よく使う値を先にトークン化） ---------- */
  --ls-base: .04em;   /* 本文の基準 */
  --ls-btn: .05em;    /* ボタン */
  --ls-title: .10em;  /* 見出し */
  --ls-wide: .12em;   /* 小見出し広め */

  /* ---------- Radius（用途別の追加） ---------- */
  --r-tag: 5px;       /* タグ */
  --r-pill: 999px;    /* ピル（CTAやタブ等） */

  /* ---------- Brand background ---------- */
  --c-brand-soft: #fbcada;

  /* ---------- Alias（読みやすさ優先：必要なら使う） ---------- */
  --ink: var(--c-text);
  --paper: var(--c-bg);
  --accent-500: var(--c-accent);
  --brand-500: var(--c-accent-2);

}