@charset "utf-8";
/* ==========================================================================
   tokens.css ― デザイントークン（正本）
   サンプルひだまり幼稚園テンプレート

   ★ このファイルの外に色・余白・文字サイズの直値を書かないこと。
   ★ 値はすべて handoff/build/*.dc.html からの実測。勝手に足していない。
     足りない値が出たら、ここに足す前に相談する。

   ■ 配色の書き方（全プロジェクト共通ルール）
     面（背景）を定義したら、必ずその上に乗る文字色を対で定義する。
     片方だけ定義すると、状態が重なったときに読めない組み合わせが生まれる。
     命名は  --c-<面>  と  --c-on-<面>  の対にしてある。

   ■ 単位
     DADS 実装方針に従い rem（16px = 1rem）。calc(N / 16 * 1rem) で px 意図を残す。

   ■ 出典
     フォーカスインジケーターの実装は デジタル庁デザインシステム（MIT License,
     Copyright (c) 2025 デジタル庁）の global.css に基づく。
     https://github.com/digital-go-jp/design-system-example-components-html
   ========================================================================== */

:root {

  /* ======================================================================
     1. 面と文字の対（コントラスト比は実測値）
     ====================================================================== */

  /* --- 地の色（すべて 4.5:1 以上。安全に本文を置ける） --------------- */
  --c-page:              #F6F1E6;   /* ページの地色（クリーム） */
  --c-on-page:           #4F483E;   /* 8.01:1  OK */

  --c-surface:           #FFFFFF;   /* カード・表の地 */
  --c-on-surface:        #4F483E;   /* 9.02:1  OK */

  --c-surface-ivory:     #FAF2DE;   /* 生成り */
  --c-on-surface-ivory:  #4F483E;   /* 8.08:1  OK */

  --c-surface-cream:     #F7EAD2;   /* 淡いクリーム */
  --c-on-surface-cream:  #4F483E;   /* 7.58:1  OK */

  --c-surface-beige:     #EEE7D9;   /* 薄いベージュ */
  --c-on-surface-beige:  #4F483E;   /* 7.33:1  OK */

  --c-surface-mint:      #EAF0DC;   /* 制服の帯 */
  --c-on-surface-mint:   #4F483E;   /* 7.66:1  OK */

  --c-ink-strong:        #2A2620;   /* 濃茶。最も濃い文字色 */
  --c-on-ink-strong:     #FFFFFF;   /* 15.04:1 OK（面として使う場合） */

  --c-field:             #FAF8F2;   /* 入力欄の地 */
  --c-on-field:          #4F483E;   /* 8.72:1  OK */

  --c-map:               #EEF3E2;   /* 簡易地図の地 */
  --c-on-map:            #4F483E;

  /* --- 文字だけに使う色 ---------------------------------------------- */
  --c-text:              #4F483E;   /* 本文 */
  --c-text-brown:        #7C603A;   /* ロゴ・見出しの茶  5.19:1（地色上）OK */
  --c-text-muted:        #665F52;   /* 補助  4.53:1  ／ 引き渡しは #968D7B（2.92:1）*/
  --c-text-faint:        #655F57;   /* さらに薄い  4.52:1 ／ 引き渡しは #8A8378（3.33:1）*/
  --c-text-disabled:     #B7AD9C;   /* 無効。WCAG 1.4.3 は操作できない部品の文字を対象外に
                                       しているため、引き渡しの値のまま */
  --c-danger:            #CC4A38;   /* エラー文字  4.56:1（白地上）OK */
  --c-heading-accent:    #A83C29;   /* 見出し直下の赤い一文  4.50:1
                                       ／ 引き渡しは #D15A45（3.54:1）*/

  /* --- 罫線・区切り（非テキストなので 3:1 が基準） -------------------- */
  /* 罫線は行の区切りだけを担う飾り。文字で内容が分かるので
     WCAG 1.4.11 の「装飾」に当たるとみなし、引き渡しの色のままにしている */
  --c-border:            #D6CCB9;
  --c-border-light:      #E5DDCB;
  --c-border-lighter:    #EEE6D8;

  /* ======================================================================
     2. テーマの色面 ― ★ここに既知のコントラスト問題が集中している
     ------------------------------------------------------------------
     引き渡し（REBUILD_SPEC.md 4章）は「白文字との組み合わせ3件」を
     設計として承知のうえ残していると書いているが、実測すると
     3:1 すら通らない組み合わせが 10 件ある。
     面の色は正本なので変えていない。文字色だけ下の --c-on-* で切り替える。
     ====================================================================== */

  --c-brand:             #E8963B;   /* 主色（橙）。出現217回 */
  --c-brand-light:       #E5AB5E;   /* 淡い橙（円・延長預かり） */
  --c-green:             #94B84E;
  --c-green-light:       #B0C46A;   /* 淡い緑（円・一時保育） */
  --c-blue:              #55A4D9;
  /* ★ 面の色で変えたのはここだけ。
     #4A89BD は白文字 3.75:1・濃文字 4.01:1 で、どちらでも 4.5:1 に届かない。
     REBUILD_SPEC 4章が「この3色を濃くするか、文字を濃い色に変える」と
     書いているとおり、色相と彩度を保ったまま濃くした（白文字 4.52:1）。 */
  --c-blue-deep:         #3F7BAD;   /* 園生活のサポートの帯（引き渡しは #4A89BD）*/
  --c-blue-light:        #8EC6E3;   /* 淡い青（円・早朝預かり） */
  --c-pink:              #DD8FAE;
  --c-teal:              #3FA9C9;   /* フッター にじ保育園 */
  --c-emerald:           #46A878;   /* フッター そら保育所 */

  /* --- 色面に乗せる文字色 ------------------------------------------
     ★ 面の色は1つも変えず、文字だけ濃茶 #2A2620 にして基準を満たしている。
       #2A2620 はフッターで既に使われている色。色を足していない。
       引き渡しは白文字で、10件すべて 4.5:1 未満・うち9件は 3:1 も通らなかった。
       白へ戻すときはこの10行を #FFFFFF にする（見た目は引き渡しどおりになる）。 */
  --c-on-brand:          #2A2620;   /* 6.34:1  （白なら 2.37）*/
  --c-on-brand-light:    #2A2620;   /* 7.39:1  （白なら 2.04）*/
  --c-on-green:          #2A2620;   /* 6.61:1  （白なら 2.28）*/
  --c-on-green-light:    #2A2620;   /* 7.84:1  （白なら 1.92）*/
  --c-on-blue:           #2A2620;   /* 5.51:1  （白なら 2.73）*/
  --c-on-blue-deep:      #FFFFFF;   /* 4.52:1  面を濃くしたので白のまま */
  --c-on-blue-light:     #2A2620;   /* 8.12:1  （白なら 1.85）*/
  --c-on-pink:           #2A2620;   /* 6.17:1  （白なら 2.44）*/
  --c-on-teal:           #2A2620;   /* 5.54:1  （白なら 2.72）*/
  --c-on-emerald:        #2A2620;   /* 5.11:1  （白なら 2.94）*/

  /* --- テーマ色を「文字」として淡い地の上に置く場合 --------------------
     英字ラベル（FEATURES 等）・費用表の項目名・サイトマップの見出し・FAQ の「＋」。
     ★ 色相と彩度は保ったまま暗くしてある。セクションごとの色分けは残る。
       比はサイト内のすべての淡い地（クリーム・白・生成り・ベージュ・
       ミント・淡クリーム・△の地・満席の地）に対する最小値。 */
  --c-text-brand:        #8C5210;   /* 4.52:1  （引き渡しは #E8963B ＝ 1.71）*/
  --c-text-blue:         #216592;   /* 4.50:1  （引き渡しは #55A4D9 ＝ 1.97）*/
  --c-text-green:        #52672A;   /* 4.52:1  （引き渡しは #94B84E ＝ 1.65）*/
  --c-text-pink:         #A93362;   /* 4.51:1  （引き渡しは #DD8FAE ＝ 1.76）*/
  --c-text-on-light-safe: #7C603A;  /* 同じ茶系で 5.19:1 */

  /* --- 小見出しに使う「濃い版」。上と同じ考え方で暗くしてある -------- */
  --c-deep-blue:         #33648C;   /* 4.50:1  （引き渡しは #4A89BD ＝ 2.71）*/
  --c-deep-orange:       #83561D;   /* 4.54:1  （引き渡しは #C07F2A ＝ 2.41）*/
  --c-deep-green:        #556625;   /* 4.54:1  （引き渡しは #7D9636 ＝ 2.41）*/
  --c-deep-pink:         #904969;   /* 4.50:1  （引き渡しは #B3688A ＝ 2.88）*/

  /* ======================================================================
     3. 状態の色（面と文字を必ず対で）
     ====================================================================== */

  /* --- 見学予約カレンダー（SITEMAP_v1 3章の表 ＋ 実装から実測） -------
     ⚠ 引き渡しの凡例は ◎△×－ の4つだが、実装には5つ目「受付終了」がある
       （過去日）。凡例に無いので、表示するなら凡例に足す判断が要る。 */
  --c-slot-open:         #FFFFFF;   --c-on-slot-open:  #4F483E;  /* ◎ 9.02:1 OK */
  --c-slot-few:          #F3DCB9;   --c-on-slot-few:   #4F483E;  /* △ 6.76:1 OK */
  --c-slot-full:         #EDEAE3;   --c-on-slot-full:  #726759;  /* × 4.60:1 OK */
  --c-slot-none:         #F6F1E6;   --c-on-slot-none:  #736D64;  /* － 4.55:1 OK */
  --c-slot-past:         #EDEAE3;   --c-on-slot-past:  #6F6960;  /* 受付終了 4.52:1 OK */

  /* --- ステップ表示（12_VISIT_POLISH.md 3章） ------------------------ */
  --c-step-current:      #E8963B;   --c-on-step-current: #2A2620;  /* 6.34:1 OK */
  --c-step-done:         #EAF0DC;   --c-on-step-done:    #5B7428;  /* 4.53:1 OK */
  --c-step-todo:         #F6F1E6;   --c-on-step-todo:    #736D64;  /* 4.55:1 OK */
  --c-step-todo-border:  #E5DDCB;

  /* --- エラー（12_VISIT_POLISH.md 2章。ここは対で指定済み） ---------- */
  --c-error-box:         #FBE9E5;   --c-on-error-box:    #8F2E1E;  /* 6.94:1 OK */
  --c-error-line:        #CC4A38;                                  /* 入力欄の枠線 2px */

  /* --- 記事カテゴリのバッジ（お知らせ） ------------------------------ */
  --c-cat-news:          #E0E9C8;   --c-on-cat-news:   #4F483E;
  --c-cat-blog:          #D9EAF6;   --c-on-cat-blog:   #4F483E;
  --c-cat-event:         #EED7B8;   --c-on-cat-event:  #4F483E;

  /* ======================================================================
     4. フォーカスインジケーター ― ★変更禁止
     デジタル庁デザインシステムの2重構造（黒4px ＋ Yellow-300 2px）。
     outline:none を書かない。色・太さ・オフセットを変えない。
     ====================================================================== */
  --c-focus-outline:     #000000;
  --c-focus-halo:        #FFD43D;   /* Yellow-300。黒との比 14.74:1 */
  --focus-outline-w:     calc(4 / 16 * 1rem);
  --focus-offset:        calc(2 / 16 * 1rem);
  --focus-halo-w:        calc(2 / 16 * 1rem);
  --focus-radius:        calc(4 / 16 * 1rem);

  /* ======================================================================
     5. 書体
     ====================================================================== */
  --font-base: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN',
               'Noto Sans JP', 'Yu Gothic', sans-serif;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  800;

  /* ----------------------------------------------------------------------
     文字サイズ
     ⚠ 引き渡しの実測は 15px(135回) / 14px(119) / 13px(52) / 12px(35) / 11px(25)。
       本文が15px、補助が11〜13px で、共通ルール（本文16px・14px未満禁止）と
       DADS の基準を満たしていない。ここでは下限を14pxに引き上げてある。
       元の値との対応は次のとおり。
         11px / 12px / 13px  →  --fs-sm (14px)
         15px                →  --fs-md (16px)
       行が1〜2px 伸びるため、`screens/` と比べると縦が数%長くなる。
     ---------------------------------------------------------------------- */
  --fs-sm:   calc(14 / 16 * 1rem);   /* 下限。付随情報のみ */
  --fs-md:   calc(16 / 16 * 1rem);   /* 本文 */
  --fs-lg:   calc(17 / 16 * 1rem);   /* リード文 */
  --fs-xl:   calc(19 / 16 * 1rem);
  --fs-2xl:  calc(22 / 16 * 1rem);
  --fs-3xl:  calc(24 / 16 * 1rem);
  --fs-4xl:  calc(28 / 16 * 1rem);

  /* 可変（実測の clamp をそのまま） */
  --fs-h1:        clamp(calc(28 / 16 * 1rem), 4.4vw, calc(42 / 16 * 1rem));
  --fs-h2:        clamp(calc(26 / 16 * 1rem), 3.4vw, calc(36 / 16 * 1rem));
  --fs-h3:        clamp(calc(19 / 16 * 1rem), 2.2vw, calc(23 / 16 * 1rem));
  --fs-hero:      clamp(calc(34 / 16 * 1rem), 5.5vw, calc(76 / 16 * 1rem));
  --fs-404:       clamp(calc(56 / 16 * 1rem), 9vw, calc(96 / 16 * 1rem));
  --fs-404-title: clamp(calc(22 / 16 * 1rem), 3vw, calc(30 / 16 * 1rem));

  /* 行送り（DADS：本文は1.5以上） */
  --lh-tight:  1.15;   /* 見出し */
  --lh-snug:   1.5;
  --lh-body:   1.7;    /* 本文 */
  --lh-loose:  2.1;
  --lh-table:  2.3;    /* 表の行 */

  /* 字間（英字ラベル） */
  --ls-en-sm:  1px;
  --ls-en:     2px;
  --ls-en-lg:  4px;
  --ls-jp:     .02em;

  /* ======================================================================
     6. 余白（実測値のみ）
     ====================================================================== */
  --sp-2:   calc(2 / 16 * 1rem);
  --sp-4:   calc(4 / 16 * 1rem);
  --sp-6:   calc(6 / 16 * 1rem);
  --sp-8:   calc(8 / 16 * 1rem);
  --sp-10:  calc(10 / 16 * 1rem);
  --sp-12:  calc(12 / 16 * 1rem);
  --sp-14:  calc(14 / 16 * 1rem);
  --sp-16:  calc(16 / 16 * 1rem);
  --sp-18:  calc(18 / 16 * 1rem);
  --sp-20:  calc(20 / 16 * 1rem);
  --sp-22:  calc(22 / 16 * 1rem);
  --sp-24:  calc(24 / 16 * 1rem);
  --sp-26:  calc(26 / 16 * 1rem);
  --sp-28:  calc(28 / 16 * 1rem);
  --sp-30:  calc(30 / 16 * 1rem);
  --sp-32:  calc(32 / 16 * 1rem);
  --sp-36:  calc(36 / 16 * 1rem);
  --sp-40:  calc(40 / 16 * 1rem);
  --sp-44:  calc(44 / 16 * 1rem);
  --sp-56:  calc(56 / 16 * 1rem);
  --sp-70:  calc(70 / 16 * 1rem);
  --sp-90:  calc(90 / 16 * 1rem);
  --sp-140: calc(140 / 16 * 1rem);
  --sp-160: calc(160 / 16 * 1rem);

  /* セクションの上下（可変） */
  --sp-section:    clamp(calc(56 / 16 * 1rem), 8vw, calc(90 / 16 * 1rem));
  --sp-section-lg: clamp(calc(90 / 16 * 1rem), 12vw, calc(140 / 16 * 1rem));

  /* ======================================================================
     7. 角丸・影・幅
     ====================================================================== */
  --r-sm:    calc(8 / 16 * 1rem);
  --r-md:    calc(12 / 16 * 1rem);   /* 最頻。ボタン・カード */
  --r-lg:    calc(16 / 16 * 1rem);
  --r-xl:    calc(18 / 16 * 1rem);
  --r-pill:  9999px;
  --r-circle: 50%;
  --r-arc:   100% 100% 0 0;          /* セクション間の弧 */

  --shadow-card:   0 2px 10px rgba(0, 0, 0, .06);
  --shadow-soft:   0 2px 8px rgba(0, 0, 0, .05);
  --shadow-raised: 0 2px 10px rgba(0, 0, 0, .08);
  --shadow-strong: 0 2px 8px rgba(0, 0, 0, .2);

  --w-outer:   calc(1400 / 16 * 1rem);   /* ヘッダー・フッターの外枠 */
  --w-wide:    calc(1100 / 16 * 1rem);
  --w-content: calc(1000 / 16 * 1rem);
  --w-narrow:  calc(900 / 16 * 1rem);
  --w-text:    calc(820 / 16 * 1rem);    /* 本文の読みやすい幅 */
  --w-form:    calc(640 / 16 * 1rem);

  --gutter:    clamp(var(--sp-16), 5vw, var(--sp-24));

  /* 下層ページのヘッダー帯（900px で高さが変わる。値は 2章の表） */
  --h-pagehead-sp: calc(220 / 16 * 1rem);
  --h-pagehead-pc: calc(340 / 16 * 1rem);

  /* ターゲット領域の下限（DADS 44px） */
  --tap-min: calc(44 / 16 * 1rem);

  /* ======================================================================
     8. 動き（prefers-reduced-motion で 0 にする。base.css 側で上書き）
     ====================================================================== */
  --dur-fast:   .2s;
  --dur-base:   .25s;
  --ease:       ease;

  /* ======================================================================
     9. ブレークポイント（覚え書き）
     カスタムプロパティは @media の条件に使えないため、値は各CSSに直接書く。
     ここは「この2本しか使わない」ことを明示するための記録。
       900px  … 全ページ共通。ヘッダー／カード段組／カレンダーの部品差し替え
       1260px … 見学予約のステップ表示のみ（実装の `wide` 判定）
     ====================================================================== */
}

/* ==========================================================================
   引き渡しの見た目に戻したいとき
   ★ 上の --c-on-* 10行を #FFFFFF にし、--c-text-* / --c-deep-* を
     引き渡しの値（コメントに併記）へ戻し、--c-blue-deep を #4A89BD にする。
     コントラストは基準を割るが、screens/ と同じ見た目になる。
   ========================================================================== */