@layer tokens {
  /* トークンはサイト全体で共有する設計値。
     再利用する値、Figma 上で意味を持つ値、レイアウトやアクセシビリティの基準値を追加する。
     単一コンポーネントだけの微調整は、意図が明確になる場合を除きコンポーネント側に留める。 */
  :root {
    /* ============================================================
       Color — Figma ワイヤーフレーム「_カラー」から抽出
       ============================================================ */

    /* ---------- Brand: 見出しのペリウィンクル ---------- */
    --color-brand: #5e68ad; /* 見出し（そうだんやさんとは 等） */
    --color-brand-dark: #404979;
    --color-brand-tint: #eef0f8; /* ブランド系の薄い面 */

    /* ---------- Accent: 緑 ---------- */
    --color-green: #78b982; /* お困りごとのアクセント（緑） */

    /* ---------- Accent: 橙 ---------- */
    --color-orange: #eca95c; /* お問い合わせ帯・お困りごとのアクセント（橙） */
    --color-orange-strong: #9a4f12; /* 白地に乗せる橙テキスト（AA コントラスト確保用） */

    /* ---------- Menu surface（モバイルメニュー：ペリウィンクル） ---------- */
    --color-menu-surface: #dee1f2;

    /* ---------- Surface ---------- */
    /* グレー面はページ背景に同調させた温かいグレージュ（oklch / hue 79）で統一する。
       冷たいコンクリート調の寒色グレーを避け、福祉サイトのやわらかさを面の温度で揃える。
       近似 hex はコメント参照（実値は oklch）。 */
    --color-bg-base: #fbf8f1; /* ページ全体の背景（明るいクリーム） */
    --color-bg-surface: #ffffff; /* ヘッダー・ボタン等の白い面 */
    --color-bg-raised: #fffdf8; /* カードなど一段上がる面 */
    --color-bg-cream: #fbf8f1; /* ご利用できる方カード（= base） */
    --color-bg-card: oklch(0.975 0.01 78); /* サービス内容カード（明るい暖色面） */
    --color-bg-card-strong: #fff4e5; /* サービス内容の主役感を出す淡い橙面 */
    --color-bg-faq: oklch(0.982 0.006 79); /* FAQ 行（明るいグレージュ） */
    --color-bg-placeholder: oklch(
      0.918 0.012 79
    ); /* 画像プレースホルダー・流れバー（温かいグレージュ） */
    --color-bg-media: #f8efe2; /* 画像まわりの薄い面 */
    --color-bg-table-label: oklch(0.948 0.008 79); /* 事業所概要 項目名 */
    --color-bg-table-value: #fffdf8; /* 事業所概要 項目内容 */
    --color-hero-scrim-strong: rgba(251, 248, 241, 0.82);
    --color-hero-scrim-soft: rgba(251, 248, 241, 0.22);
    --color-hero-scrim-clear: rgba(251, 248, 241, 0);
    /* セクション背景グラデ。実値 hex はトークン内で保持する。 */
    --color-bg-users-grad-top: #edf3dc; /* ご利用できる方 上端（淡いセージ） */
    --color-bg-users-grad-bottom: #d8efd7; /* ご利用できる方 下端（ミント） */
    --color-bg-worries-grad-top: #c8dcf0; /* こんなお困りごと 上端（淡ブルー） */
    --color-bg-worries-grad-mid: #e4eff7; /* こんなお困りごと 中間（淡ブルー） */
    --color-bg-worries-grad-bottom: #ffffff; /* こんなお困りごと 下端（白 / Figma white。サービス内容上端と連続する境界色） */
    --color-bg-service-grad-top: #ffffff; /* サービス内容 上端（白 / お困りごと下端と連続する境界色） */
    --color-bg-service-grad-mid: #fff1df; /* サービス内容 中間（淡ピーチ） */
    --color-bg-service-grad-bottom: #ffe0b5; /* サービス内容 下端（淡オレンジ） */

    /* ---------- Text ---------- */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #444444;
    --color-text-brown: #613d25; /* そうだんやさんとは 本文 */
    --color-text-muted: #606060; /* 事業所概要 項目名 */
    --color-text-faint: #333333; /* ご利用の流れ ラベル */
    --color-text-inverse: #ffffff;
    --color-text-on-placeholder: #8a8a8a;

    /* ---------- Line / Chrome ---------- */
    --color-border: #ded8ce;
    --color-border-dark: #1a1a1a;
    /* カード・面を縁取る繊細なヘアライン。クリーム地に同調した温かいグレージュにする。 */
    --color-hairline: oklch(0.88 0.011 79);
    --color-hairline-strong: oklch(0.78 0.025 79);
    --color-chevron: #4a4a4a;
    --color-footer-bg: #fbf8f1; /* フッター面（= --color-bg-base、ページと連続したクリーム） */
    --color-footer-copyright-bg: oklch(0.918 0.012 79); /* コピーライト帯（温かいバンド） */
    --color-overlay: rgba(20, 24, 33, 0.5);

    /* ============================================================
       Typography
       ============================================================ */
    --font-family-base:
      "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
      system-ui, -apple-system, sans-serif;
    --font-family-heading:
      "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --font-family-rounded:
      "M PLUS Rounded 1c", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --font-size-2xs: 0.625rem; /* 10px  コピーライト */
    --font-size-xs: 0.8125rem; /* 13px  事業所概要 */
    --font-size-sm: 0.875rem; /* 14px  流れラベル・ボタン */
    --font-size-base: 1rem; /* 16px  本文 */
    --font-size-md: 1.0625rem; /* 17px  リード・サービス本文 */
    --font-size-lg: 1.125rem; /* 18px  お困りごと */
    --font-size-xl: 1.125rem; /* 18px  カード見出し */
    --font-size-2xl: 1.25rem; /* 20px  流れ番号 */
    --font-size-3xl: clamp(
      1.375rem,
      1.21rem + 0.7vw,
      1.625rem
    ); /* 22→26px  CTA見出し・プロフィール名 */
    --font-size-4xl: clamp(1.625rem, 1.32rem + 1.25vw, 2rem); /* 26→32px  セクション見出し */
    --font-size-title-pill: 1.5625rem; /* 25px  そうだんやさんとは 装飾フレーム見出し（SPカラー版に固定追従） */
    --font-size-hero: clamp(1.75rem, 5.2vw, 2.75rem); /* ヒーロー */

    --line-height-tight: 1.3;
    --line-height-snug: 1.5;
    --line-height-base: 1.9;

    --letter-spacing-base: 0.02em;
    --letter-spacing-heading: 0.04em; /* 見出し（丸ゴシック）をやや開いて上品に見せる */
    --letter-spacing-wide: 0.08em;

    /* ============================================================
       Spacing
       ============================================================ */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    --section-padding-block: clamp(3.5rem, 8vw, 5.75rem);

    /* ============================================================
       Layout
       ============================================================ */
    --layout-max-width: 1080px;
    --layout-content-width: 880px;
    --layout-reading-width: 680px;
    --layout-narrow-width: 640px;
    --layout-gutter-inline: clamp(1.25rem, 5vw, 2rem);
    --header-height: 80px;

    /* ============================================================
       Component sizes
       ============================================================ */
    --size-touch-target: 2.5rem; /* 40px */
    --size-nav-toggle-icon-width: 1.125rem; /* 18px */
    --size-nav-toggle-icon-height: 0.875rem; /* 14px */
    --size-nav-toggle-bar-offset: 0.375rem; /* 6px */
    --size-mobile-nav-panel-max: 21.25rem; /* 340px */
    --size-hero-min-height: 21.25rem; /* 340px */
    --size-hero-max-height: 34rem; /* 544px */
    --size-about-spot-min-width: 20rem; /* 320px */
    --size-about-spot-max-width: 30rem; /* 480px */
    --size-cta-button-min-height: 2.75rem; /* 44px */
    --size-cta-button-min-width: 15rem; /* 240px */
    --size-title-accent-width: 2.5rem; /* 40px  セクション見出し下の装飾バー */
    --size-title-accent-height: 0.1875rem; /* 3px */
    --size-worries-figure-column: clamp(15rem, 30vw, 21rem);
    --size-worries-figure-width: clamp(15rem, 34vw, 22rem);
    --size-flow-number-column: 3rem; /* 48px */
    --size-flow-arrow-half-width: 0.6875rem; /* 11px */
    --size-wave-height-min: 1.5rem; /* 24px */
    --size-wave-height-max: 2.375rem; /* 38px */
    --line-width-thin: 0.0625rem; /* 1px */
    --line-width-medium: 0.125rem; /* 2px */
    --line-width-accent: 0.25rem; /* 4px */

    /* ============================================================
       Radius — Figma の各要素の角丸
       ============================================================ */
    --radius-xs: 4px; /* ハンバーガーボタン */
    --radius-sm: 7px; /* 流れバー */
    --radius-md: 8px; /* カード */
    --radius-lg: 12px; /* フッターロゴ枠 */
    --radius-pill: 9999px;

    /* ============================================================
       Shadow
       ============================================================ */
    /* 影は単層のベタ影をやめ、近接の締まり＋遠方のやわらかい拡散の二層で上品に出す。
       面（カード・帯）の安っぽさを消し、ホバー時だけ一段持ち上げる。 */
    --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.04), 0 3px 10px rgba(20, 24, 33, 0.04);
    --shadow-md: 0 6px 16px rgba(20, 24, 33, 0.06), 0 20px 44px rgba(20, 24, 33, 0.08);
    --shadow-header: 0 1px 0 rgba(20, 24, 33, 0.04), 0 8px 26px rgba(20, 24, 33, 0.06);
    --shadow-card: 0 1px 2px rgba(20, 24, 33, 0.04), 0 10px 28px rgba(20, 24, 33, 0.07);
    --shadow-card-hover: 0 8px 18px rgba(20, 24, 33, 0.07), 0 24px 50px rgba(20, 24, 33, 0.1);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 36px rgba(20, 24, 33, 0.07);
    --shadow-bubble: 8px 6px 1px rgba(0, 0, 0, 0.25); /* お困りごと吹き出し（Figma: X8 Y6 Blur1 黒25%） */
    --shadow-hero-message: 0 0.5rem 1rem rgba(20, 24, 33, 0.2);
    /* ヒーローのキャッチコピー白フチ（ハロー）。フェード帯を撤去しイラスト上へ直接文字を浮かせるため、
       1px の白アウトライン＋ぼかしで可読性を確保する（カラー版 soudan-noren-top の文字処理に対応）。 */
    --text-halo-hero:
      0 0 4px var(--color-text-inverse), 0 0 8px var(--color-text-inverse),
      1px 1px 0 var(--color-text-inverse), -1px 1px 0 var(--color-text-inverse),
      1px -1px 0 var(--color-text-inverse), -1px -1px 0 var(--color-text-inverse);

    /* ============================================================
       Motion
       ============================================================ */
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 150ms;
    --duration-base: 240ms;
    --duration-slow: 360ms;
    --duration-reveal: 600ms; /* スクロール入場（ふわっと・バウンスなし） */

    /* ============================================================
       Breakpoints（参照用）
       ============================================================ */
    --bp-md: 768px;
  }
}