/* =============================================================================
   tokens.css — ベースデザイン（デザイントークン＝単一真実源）
   -----------------------------------------------------------------------------
   ★ここがサイトの「ベースデザイン」です。事業ごとに変えるのは原則このファイルだけ。
     色・余白・文字・角丸・影・重なり順・ブレークポイントを 1 か所にまとめています。
     値を差し替えれば、サイト全体の見た目がまとめて変わります（CSS の他ファイルは触らない）。

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

   色は oklch()（知覚的に均一な現代色空間）で定義しています。
   本文の文字色は背景に対して コントラスト比 4.5:1 以上 を満たします（accessibility.md §1.1）。
   ダークモードにも対応（color-scheme + prefers-color-scheme）。

   --- Kodomo Edu International School ブランド定義（2026-07-09）---
   ロゴ原本（inputs/Pictures/Logo/ai/Logo.ai）から抽出した正式色:
     ティール #13A9B4（プライマリ）／ライトティール #81CFCD／
     オレンジ #F26223（CTA）／イエロー #FCE04C／グリーン #1AC49B
   見出しは游明朝（現行サイト継承・中字500）、本文はシステム角ゴシック。
   白文字を乗せる面（ボタン等）はコントラスト4.5:1を満たす濃度に調整した派生色を使う。
   根拠: workspace/design-base.md / design-current-site.md / design-brand-assets.md
   ============================================================================= */

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

    /* --- パレット（色見本）: oklch(明度 彩度 色相) --- */

    /* ブランド（ティール）の濃淡 */
    --color-teal-50: oklch(97% 0.014 200deg); /* ほぼ白の淡ティール（#F0FAFA 相当） */
    --color-teal-100: oklch(94% 0.028 200deg); /* セクション背景（#EAF8F9 相当） */
    --color-teal-300: oklch(81% 0.07 198deg); /* ライトティール（ロゴ #81CFCD） */
    --color-teal-500: oklch(66% 0.105 202deg); /* ブランド原色（ロゴ #13A9B4）: 図形・大文字専用 */
    --color-teal-600: oklch(53% 0.088 203deg); /* 主役色（白文字で 4.5:1 以上） */
    --color-teal-700: oklch(46% 0.078 204deg); /* 主役色の濃いめ（ホバー・本文リンク） */
    --color-teal-800: oklch(39% 0.066 205deg);

    /* CTA（オレンジ）の濃淡 */
    --color-orange-500: oklch(67% 0.19 40deg); /* ブランド原色（ロゴ #F26223）: 図形・大文字専用 */
    --color-orange-600: oklch(56% 0.165 40deg); /* CTAボタン地（白文字で 4.5:1 以上） */
    --color-orange-700: oklch(50% 0.15 41deg); /* CTAホバー */

    /* アクセント */
    --color-yellow-400: oklch(90% 0.15 95deg); /* イエロー（ロゴ #FCE04C）: 上に乗せる文字は濃色のみ */
    --color-brand-green-500: oklch(72% 0.13 170deg); /* グリーン（ロゴ #1AC49B）: 図形専用 */
    --color-pink-400: oklch(76% 0.14 356deg); /* ピンク（リーフレット #FF7BB1）: 限定使用 */

    /* グレー（わずかにティール寄りの無彩色）の濃淡 */
    --color-gray-0: oklch(100% 0 0deg); /* 純白 */
    --color-gray-50: oklch(98.5% 0.002 200deg);
    --color-gray-100: oklch(96% 0.003 200deg);
    --color-gray-200: oklch(92% 0.004 200deg);
    --color-gray-300: oklch(87% 0.005 200deg);
    --color-gray-400: oklch(70% 0.006 200deg);
    --color-gray-500: oklch(55% 0.008 200deg);
    --color-gray-600: oklch(45% 0.008 200deg); /* 補助テキスト（白背景に 7:1 前後） */
    --color-gray-700: oklch(37% 0.008 200deg);
    --color-gray-800: oklch(27% 0.008 200deg); /* 本文（白背景に 11:1 前後） */
    --color-gray-900: oklch(20% 0.008 200deg); /* 見出し（白背景に 15:1 前後） */
    --color-gray-950: oklch(16% 0.008 200deg);

    /* 状態色（白背景で本文として 4.5:1 以上になる明度に調整） */
    --color-green-600: oklch(52% 0.11 165deg); /* 成功（ブランドグリーンの文字用濃度） */
    --color-amber-700: oklch(55% 0.14 70deg); /* 注意 */
    --color-red-600: oklch(53% 0.20 25deg); /* エラー／必須 */

    /* --- スケール: 寸法（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: 6rem; /* 96px */

    /* --- スケール: 角丸 --- */
    --radius-1: 0.25rem;
    --radius-2: 0.5rem;
    --radius-3: 0.75rem;
    --radius-full: 9999px;

    /* === 2) 意味トークン（用途で名付ける）=================================
       部品 CSS（base.css / components.css）はこちらだけを参照します。 */

    /* --- 配色（ライトテーマの既定値）--- */
    --color-bg: var(--color-gray-0); /* ページ背景 */
    --color-surface: var(--color-teal-50); /* カード等の面（淡ティール） */
    --color-surface-2: var(--color-teal-100); /* 一段沈んだ面・帯セクション背景 */
    --color-border: var(--color-gray-300); /* 境界線（非テキスト 3:1 以上） */
    --color-text: var(--color-gray-800); /* 本文（4.5:1 以上） */
    --color-text-strong: var(--color-gray-900); /* 見出し・強調 */
    --color-text-muted: var(--color-gray-600); /* 補助テキスト（4.5:1 以上） */
    --color-text-on-primary: var(--color-gray-0); /* 主役色の上に乗る文字 */
    --color-primary: var(--color-teal-600); /* 主役色（リンク・ボタン。白文字 4.5:1 確保） */
    --color-primary-strong: var(--color-teal-700); /* 主役色の濃いめ（ホバー） */
    --color-primary-weak: var(--color-teal-100); /* 主役色の淡い面 */
    --color-brand: var(--color-teal-500); /* ブランド原色（ロゴ色。図形・装飾・大見出し専用） */
    --color-brand-tint: var(--color-teal-300); /* ライトティール（装飾・図解） */
    --color-cta: var(--color-orange-600); /* 主CV（説明会・見学会予約）ボタン地 */
    --color-cta-strong: var(--color-orange-700); /* CTAホバー */
    --color-cta-graphic: var(--color-orange-500); /* オレンジ原色（図形・大文字専用） */
    --color-accent: var(--color-yellow-400); /* バッジ・マーカー（文字は濃色のみ） */
    --color-accent-green: var(--color-brand-green-500); /* 図解・チェックマーク */
    --color-link: var(--color-teal-700); /* 本文中リンク（白背景に 4.5:1 以上） */
    --color-link-hover: var(--color-teal-800);
    --color-success: var(--color-green-600);
    --color-warning: var(--color-amber-700);
    --color-danger: var(--color-red-600);
    --color-focus: var(--color-teal-700); /* フォーカスリング（3:1 以上） */

    /* --- WP 移行記事レガシー文字色（blog/ 配下の移行コンテンツ専用）--------
       WP プリセット文字色クラス has-*-color の受け皿（参照元は components.css
       末尾の移行セクションのみ。新規ページでは使わない）。原文の色相を保ち
       つつ、ライト/ダーク各テーマの背景で本文 4.5:1 以上になる明度に調整。
       色相が一致する既存の意味トークンがあるものはそれを参照する。 */
    --color-wp-vivid-red: var(--color-danger); /* 原文 #cf2e2e（色相ほぼ同一） */
    --color-wp-luminous-vivid-orange: var(--color-cta); /* 原文 #ff6900 は白地 2.9:1 → AA 明度の同系オレンジへ */
    --color-wp-luminous-vivid-amber: var(--color-warning); /* 原文 #fcb900 は白地 1.7:1 → AA 明度の同系アンバーへ */
    --color-wp-vivid-purple: oklch(50% 0.2 305deg); /* 原文 #9b51e0（白地 4.5:1 ぎりぎり）を余裕ある明度へ */
    --color-wp-vivid-cyan-blue: oklch(51% 0.13 245deg); /* 原文 #0693e3 は白地 3.3:1 → AA 明度の同系ブルーへ */
    --color-wp-green-cyan: var(--color-success); /* 原文 #00d084 / #7bdcb5（緑シアン系） */

    /* --- 余白（スペーシング）--- */
    --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);

    /* --- 角丸 --- */
    --radius-sm: var(--radius-1);
    --radius-md: var(--radius-2);
    --radius-card: var(--radius-3);
    --radius-pill: var(--radius-full);

    /* --- 影（oklch + パーセント不透明度。alpha-value-notation=percentage に準拠）--- */
    --shadow-1: 0 1px 2px oklch(0% 0 0deg / 8%), 0 1px 1px oklch(0% 0 0deg / 6%);
    --shadow-2: 0 4px 10px oklch(0% 0 0deg / 8%), 0 2px 4px oklch(0% 0 0deg / 6%);

    /* --- 重なり順（z-index）。場当たり的な巨大値を禁じ段階管理する --- */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 800;
    --z-modal: 1000;
    --z-toast: 1100;

    /* --- ブレークポイント（メディアクエリで使う基準。トークンとして明示）--- */
    --bp-sm: 36rem; /* 576px 付近 */
    --bp-md: 48rem; /* 768px 付近 */
    --bp-lg: 64rem; /* 1024px 付近 */

    /* --- レイアウト --- */
    --layout-max-inline: 72rem; /* 本文コンテナの最大幅（現行の960/1200/1210px混在を統一） */
    --layout-gutter: var(--space-md); /* 左右の余白 */

    /* --- タイポグラフィ --- */

    /* 本文: 和文・欧文ともに読みやすいシステム角ゴシック（外部フォント追加・追加接続なし） */
    --font-sans:
      system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
      "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;

    /* 見出し: 游明朝（現行サイト継承）。細字300はやめ、部品側で weight 500 を使う（可読性） */
    --font-serif:
      "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP",
      "Times New Roman", serif;
    --font-display: var(--font-serif); /* 見出し用の意味トークン */
    --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Noto Sans Mono", monospace;

    /* 流体タイポ: clamp(最小, 推奨[vw含む], 最大)。中間幅でも連続的に変化する。 */
    --text-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 本文 */
    --text-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
    --text-lg: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
    --text-xl: clamp(1.6rem, 1.4rem + 1vw, 2rem);
    --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); /* ヒーロー見出し */
    --leading-tight: 1.25;
    --leading-normal: 1.7; /* 和文本文は行間広めが読みやすい */

    /* --- モーション（reduced-motion で base.css が無効化する）---
       現行サイトの fadeUp(80px/1s) は読み疲れ対策で控えめに継承（24px/0.5s 相当を部品側で） */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-reveal: 500ms; /* スクロール出現 */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ブラウザ標準 UI（フォーム部品・スクロールバー）をライト/ダーク両対応に。 */
    color-scheme: light dark;
  }

  /* === ダークテーマ ========================================================
     OS / ブラウザの設定がダークのとき、意味トークンの「値だけ」を差し替える。
     部品 CSS は一切変更しない（テーマ差分はここに集約）。
     ダークでも本文 4.5:1 以上を満たす明度に調整済み。 */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: var(--color-gray-950);
      --color-surface: oklch(21% 0.012 205deg);
      --color-surface-2: oklch(25% 0.016 205deg);
      --color-border: oklch(36% 0.01 205deg); /* 暗背景に 3:1 以上 */
      --color-text: oklch(92% 0.006 200deg); /* 暗背景に 13:1 前後 */
      --color-text-strong: oklch(97% 0.004 200deg);
      --color-text-muted: oklch(74% 0.008 200deg); /* 暗背景に 4.5:1 以上 */
      --color-text-on-primary: oklch(16% 0.01 205deg);

      /* 暗背景では主役色を明るめにして 4.5:1 以上を確保 */
      --color-primary: oklch(74% 0.1 200deg);
      --color-primary-strong: oklch(82% 0.09 198deg);
      --color-primary-weak: oklch(28% 0.045 203deg);
      --color-brand: oklch(74% 0.1 200deg);
      --color-brand-tint: oklch(60% 0.08 200deg);
      --color-cta: oklch(72% 0.16 42deg);
      --color-cta-strong: oklch(80% 0.14 45deg);
      --color-cta-graphic: oklch(72% 0.16 42deg);
      --color-accent: oklch(85% 0.13 95deg);
      --color-accent-green: oklch(76% 0.12 168deg);
      --color-link: oklch(78% 0.09 198deg);
      --color-link-hover: oklch(86% 0.08 196deg);
      --color-success: oklch(74% 0.12 165deg);
      --color-warning: oklch(80% 0.13 70deg);
      --color-danger: oklch(72% 0.17 25deg);
      --color-focus: oklch(80% 0.09 198deg);

      /* WP 移行記事レガシー文字色（暗背景で 4.5:1 以上へ明度を上げる。
         意味トークン参照のもの（red/orange/amber/green）は参照先が
         切り替わるため、ここでは生値定義の 2 色のみ差し替える） */
      --color-wp-vivid-purple: oklch(75% 0.15 305deg);
      --color-wp-vivid-cyan-blue: oklch(75% 0.11 240deg);
      --shadow-1: 0 1px 2px oklch(0% 0 0deg / 40%), 0 1px 1px oklch(0% 0 0deg / 30%);
      --shadow-2: 0 4px 10px oklch(0% 0 0deg / 45%), 0 2px 4px oklch(0% 0 0deg / 35%);
    }
  }
}