/* =============================================================================
   tokens.css — ベースデザイン（デザイントークン＝単一真実源）
   -----------------------------------------------------------------------------
   ★lecaldo.co.jp 再構築版。ベースデザインは lecaldo.link（total-care-child テーマ）
     に準拠する（decisions-log 2026-07-18）。値の出典は workspace/design-base.md と
     テーマ style.css の頻度集計（workspace/ 記録参照）。

   構成は 02_conventions/css.md §1 に従い「2 段構成」です。
     1) 原始トークン … パレット（色見本）と各種スケール（寸法の段階）。生の値。
     2) 意味トークン … 用途で名付けたトークン（--color-primary など）。原始を参照する。
        → 部品 CSS は必ずこの「意味トークン」を参照します（生の値は書かない）。

   色は oklch()。元テーマの16進値からの変換値をコメントに残す。
   本文の文字色は背景に対して コントラスト比 4.5:1 以上（accessibility.md §1.1）。
   ダークモード対応（color-scheme + prefers-color-scheme）。
   ============================================================================= */

@layer tokens {
  :root {
    /* === 1) 原始トークン（パレット／スケール）=============================== */

    /* --- パレット: ブランド（緑・ティール）の濃淡 ---
       ブランド主色は #009688（事業担当者指定 2026-07-18）。
       ※#009688 は白文字とのコントラスト 3.7:1 のため、文字が乗る場所
       （ボタン・リンク文字）だけは同色相の濃色 teal-600（#00796b 相当・5.3:1）を使う。
       装飾・下線・タグ・文字の乗らない面は teal-500=#009688 そのもの。 */
    --color-teal-50: oklch(97% 0.013 180deg); /* #eef9f5 淡い緑地（理念カード） */
    --color-teal-100: oklch(94% 0.020 183deg); /* 淡いティール面 */
    --color-teal-500: oklch(60.5% 0.107 183deg); /* #009688 ブランド主色（装飾用） */
    --color-teal-550: oklch(56.9% 0.101 183deg); /* #008a7d 元フッター緑（参考） */
    --color-teal-600: oklch(51.7% 0.093 181deg); /* #00796b 白文字が乗る主役（5.3:1） */
    --color-teal-700: oklch(46.7% 0.084 180deg); /* #00695c ホバー（6.6:1） */
    --color-teal-800: oklch(38% 0.075 180deg);

    /* グレー（元テーマ: 文字 #333/#666、背景 #fafcfc/#f7f9fa、枠 #e5e5e5/#cfd8dc）
       わずかに青緑側へ寄せた無彩色スケール */
    --color-gray-0: oklch(100% 0 0deg); /* 純白（元 #fff） */
    --color-gray-50: oklch(99% 0.002 197deg); /* 元 #fafcfc LPブロック背景 */
    --color-gray-100: oklch(98.1% 0.003 210deg); /* 元 #f7f9fa */
    --color-gray-200: oklch(93.8% 0.007 197deg); /* 元 #e5ecec カード枠（淡） */
    --color-gray-300: oklch(92.2% 0.002 197deg); /* 元 #e5e5e5 カード枠 */
    --color-gray-400: oklch(87.7% 0.011 226deg); /* 元 #cfd8dc 点線見出し装飾 */
    --color-gray-500: oklch(56.9% 0.002 210deg); /* 元 #777 */
    --color-gray-600: oklch(51% 0.002 210deg); /* 元 #666 補助テキスト（5.7:1） */
    --color-gray-700: oklch(40% 0.004 220deg);
    --color-gray-800: oklch(32.1% 0.002 220deg); /* 元 #333 本文（12.6:1） */
    --color-gray-900: oklch(26% 0.024 264deg); /* 元 #1e2430 ダークネイビー見出し */
    --color-gray-950: oklch(18% 0.015 264deg);

    /* 状態色（白背景で本文として 4.5:1 以上になる明度に調整） */
    --color-green-600: oklch(52% 0.13 150deg); /* 成功 */
    --color-amber-700: oklch(55% 0.14 70deg); /* 注意 */
    --color-red-600: oklch(53% 0.20 25deg); /* エラー／必須（元 #d9534f を濃く調整） */

    /* --- スケール: 寸法（4px = 0.25rem 基準）--- */
    --size-0: 0;
    --size-1: 0.25rem; /*  4px */
    --size-2: 0.5rem; /*  8px */
    --size-3: 0.75rem; /* 12px */
    --size-4: 1rem; /* 16px */
    --size-5: 1.5rem; /* 24px */
    --size-6: 2rem; /* 32px */
    --size-7: 3rem; /* 48px ボタン最小高さ・セクション内パディング */
    --size-8: 4rem; /* 64px */
    --size-9: 5rem; /* 80px 元テーマのセクション間リズム */
    --size-10: 7.5rem; /* 120px 大セクション間 */

    /* --- スケール: 角丸（元テーマ頻度: 20px(38回) > 10px > 12px > 999px）--- */
    --radius-1: 0.25rem; /*  4px タグ・小部品 */
    --radius-2: 0.625rem; /* 10px 汎用ボタン・入力欄 */
    --radius-3: 1.25rem; /* 20px カードの定番 */
    --radius-4: 1.5rem; /* 24px 画像角丸 */
    --radius-full: 9999px; /* ピル型CVボタン */

    /* === 2) 意味トークン（用途で名付ける）================================= */

    /* --- 配色（ライトテーマの既定値）--- */
    --color-bg: var(--color-gray-0); /* ページ背景（白基調） */
    --color-surface: var(--color-gray-50); /* LPブロック・カード面（元 #fafcfc） */
    --color-surface-2: var(--color-gray-100); /* 一段沈んだ面（元 #f7f9fa） */
    --color-surface-brand: var(--color-teal-50); /* 淡い緑地の面（理念カード等） */
    --color-border: var(--color-gray-300); /* カード枠（元 #e5e5e5） */
    --color-border-weak: var(--color-gray-200); /* 淡い枠（元 #e5ecec） */
    --color-border-deco: var(--color-gray-400); /* 点線見出し装飾（元 #cfd8dc） */
    --color-text: var(--color-gray-800); /* 本文（元 #333） */
    --color-text-strong: var(--color-gray-900); /* 見出し強調（元 #1e2430） */
    --color-text-muted: var(--color-gray-600); /* 補助テキスト（元 #666） */
    --color-text-on-primary: var(--color-gray-0); /* 主役色上の白文字 */
    --color-primary: var(--color-teal-600); /* 主役: リンク・見出し・CVボタン（元 #007b8a） */
    --color-primary-strong: var(--color-teal-700); /* ホバー */
    --color-primary-weak: var(--color-teal-100); /* 主役色の淡い面 */
    --color-secondary: var(--color-teal-500); /* 装飾専用: 部分下線・タグ・日付（文字には使わない） */
    --color-link: var(--color-teal-600); /* 本文中リンク（5.0:1） */
    --color-link-hover: var(--color-teal-700);
    --color-success: var(--color-green-600);
    --color-warning: var(--color-amber-700);
    --color-danger: var(--color-red-600); /* フォーム必須・エラー */
    --color-focus: var(--color-teal-700); /* フォーカスリング */
    --color-surface-footer: var(--color-teal-700); /* フッター緑地（元#008a7dは白文字4.5:1未満のため濃色化） */
    --color-text-on-footer: var(--color-gray-0);

    /* --- 余白（スペーシング）--- */
    --space-3xs: var(--size-1);
    --space-2xs: var(--size-2);
    --space-xs: var(--size-3);
    --space-sm: var(--size-4);
    --space-md: var(--size-5);
    --space-lg: var(--size-6);
    --space-xl: var(--size-7); /* セクション内パディング */
    --space-2xl: var(--size-8);
    --space-3xl: var(--size-9); /* セクション間（元 80px） */
    --space-4xl: var(--size-10); /* 大セクション間（元 120px） */

    /* --- 角丸 --- */
    --radius-sm: var(--radius-1);
    --radius-md: var(--radius-2); /* ボタン・入力欄 */
    --radius-card: var(--radius-3); /* カード（元テーマ最頻 20px） */
    --radius-img: var(--radius-4);
    --radius-pill: var(--radius-full); /* CVボタン（ピル型） */

    /* --- 影（元テーマは「枠線＋わずかな影」。多用しない）--- */
    --shadow-1: 0 2px 4px oklch(0% 0 0deg / 10%);
    --shadow-2: 0 10px 30px oklch(0% 0 0deg / 8%);

    /* --- 重なり順（z-index）--- */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200; /* ヘッダー（sticky＋白90%＋ぼかし） */
    --z-float: 300; /* フローティングバナー（元 z-index:95 相当） */
    --z-overlay: 800;
    --z-modal: 1000;
    --z-toast: 1100;

    /* --- ブレークポイント（元テーマは 767/768px 混在 → 768px に統一）--- */
    --bp-sm: 36rem; /* 576px */
    --bp-md: 48rem; /* 768px = 単一SPブレーク */
    --bp-lg: 64rem; /* 1024px */

    /* --- レイアウト --- */
    --layout-max-inline: 75rem; /* 1200px（元テーマ標準コンテナ） */
    --layout-max-narrow: 62.5rem; /* 1000px LP・フォーム系 */
    --layout-max-text: 50rem; /* 800px 読み物系 */
    --layout-gutter: var(--space-md);
    --layout-header-block: 5.625rem; /* ヘッダー高 90px（SPは base.css で 80px） */

    /* --- タイポグラフィ ---
       元テーマ3書体構成を踏襲（セルフホスト woff2 サブセットで同梱。外部接続なし）:
       本文=Sawarabi Gothic / 装飾見出し・情緒コピー=Hina Mincho / LP大見出し=Kaisei Decol */
    --font-sans:
      "Sawarabi Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
      "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
    --font-serif-deco: "Hina Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --font-display: "Kaisei Decol", "Hiragino Mincho ProN", serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace;

    /* 流体タイポ（元テーマ: 本文1rem・SP .9rem、見出し1.2〜1.5rem、ヒーロー2〜3rem） */
    --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem); /* パンくず */
    --text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem); /* タグ・ラベル */
    --text-base: clamp(0.9rem, 0.87rem + 0.2vw, 1rem); /* 本文（SP .9→PC 1rem） */
    --text-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); /* h4・準見出し */
    --text-lg: clamp(1.15rem, 1.1rem + 0.4vw, 1.3rem); /* h3（元テーマ最頻 1.3rem） */
    --text-xl: clamp(1.3rem, 1.2rem + 0.6vw, 1.5rem); /* h2・キャッチ */
    --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem); /* ヒーロー見出し（元 clamp(2rem,4vw,3rem)） */
    --leading-tight: 1.4; /* 見出し */
    --leading-normal: 1.9; /* 本文（元テーマは 2 が標準。読みやすさ優先でわずかに詰め） */
    --leading-relaxed: 2.1; /* 情緒コピー */
    --tracking-heading: 0.05em;
    --tracking-wide: 0.12em; /* ナビ・英字小見出し */

    /* --- モーション（元テーマは一律 .3s。reduced-motion で base.css が無効化）--- */
    --motion-fast: 150ms;
    --motion-base: 300ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    color-scheme: light dark;
  }

  /* === ダークテーマ ========================================================
     意味トークンの「値だけ」を差し替える。部品 CSS は変更しない。
     ダークでも本文 4.5:1 以上を満たす明度に調整。 */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: var(--color-gray-950);
      --color-surface: oklch(22% 0.012 230deg);
      --color-surface-2: oklch(26% 0.012 230deg);
      --color-surface-brand: oklch(26% 0.030 195deg);
      --color-border: oklch(36% 0.010 220deg);
      --color-border-weak: oklch(30% 0.010 220deg);
      --color-border-deco: oklch(42% 0.015 226deg);
      --color-text: oklch(92% 0.006 210deg);
      --color-text-strong: oklch(97% 0.004 210deg);
      --color-text-muted: oklch(74% 0.010 210deg);
      --color-text-on-primary: oklch(16% 0.02 210deg);

      /* 暗背景では主役ティールを明るめにして 4.5:1 以上を確保 */
      --color-primary: oklch(75% 0.10 183deg);
      --color-primary-strong: oklch(83% 0.09 183deg);
      --color-primary-weak: oklch(30% 0.05 185deg);
      --color-secondary: oklch(68% 0.10 183deg);
      --color-link: oklch(78% 0.10 183deg);
      --color-link-hover: oklch(86% 0.08 183deg);
      --color-success: oklch(74% 0.14 150deg);
      --color-warning: oklch(80% 0.13 70deg);
      --color-danger: oklch(72% 0.17 25deg);
      --color-focus: oklch(80% 0.10 200deg);
      --color-surface-footer: oklch(23% 0.035 200deg);
      --color-text-on-footer: oklch(94% 0.006 200deg);
      --shadow-1: 0 2px 4px oklch(0% 0 0deg / 40%);
      --shadow-2: 0 10px 30px oklch(0% 0 0deg / 45%);
    }
  }
}