/*
 * 共通のデザイントークンと基本スタイル。
 * 園の公式サイトを実際に見て、トーン&マナーを合わせている。
 * 白背景に、ピンク・水色・グリーン・オレンジの4色を元気に使う配色。
 * 小規模4園の色分け（B園＝ピンク／C園＝水色／D園＝グリーン／E園＝オレンジ）は、
 * 公式サイトの各園カードの色にそのまま合わせた（functions/lib/facilities.js の color）。
 *
 * index.html / admin.html / cancel.html はこのファイルを読み込み、
 * ページ固有のスタイルだけを各ファイルの <style> に残す。
 */
:root {
  --bg: #ffffff;
  --bg-band: #eaf6fc; /* ヘッダーなどに使う、淡い水色の帯 */
  --surface: #ffffff;
  --ink: #2b2b2b;
  --muted: #6b6b6b;
  --border: #e3e3e3;
  --shadow-card: 0 2px 10px rgba(43, 43, 43, 0.06);

  --pink: #ec4899;
  --pink-soft: #fce8f3;
  --blue: #2e9fe0;
  --blue-soft: #e8f6fc;
  --green: #7cb342;
  --green-soft: #eef5e4;
  --orange: #f5a623;
  --orange-soft: #fdf1de;

  /* 意味づけしたトークン（本文中はこちらを主に使う） */
  --accent: var(--blue);
  --accent-soft: var(--blue-soft);
  --warn: #e2574c;
  --warn-soft: #fbe9e7;

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-full: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1c1c;
    --bg-band: #16324a;
    --surface: #262626;
    --ink: #f1f1f1;
    --muted: #b3b3b3;
    --border: #3a3a3a;
    --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.35);

    --pink-soft: #3a2430;
    --blue-soft: #1e3140;
    --green-soft: #263723;
    --orange-soft: #3a2e18;
    --warn-soft: #3a2420;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1c1c;
  --bg-band: #16324a;
  --surface: #262626;
  --ink: #f1f1f1;
  --muted: #b3b3b3;
  --border: #3a3a3a;
  --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.35);

  --pink-soft: #3a2430;
  --blue-soft: #1e3140;
  --green-soft: #263723;
  --orange-soft: #3a2e18;
  --warn-soft: #3a2420;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

h1, h2, .brand-heading {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

section, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

select, input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 10px;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button {
  font: inherit;
}

/* 見学したい園ごとの色分け（公式サイトの色分けに合わせたもの） */
.tone-pink   { --tone: var(--pink);   --tone-soft: var(--pink-soft); }
.tone-blue   { --tone: var(--blue);   --tone-soft: var(--blue-soft); }
.tone-green  { --tone: var(--green);  --tone-soft: var(--green-soft); }
.tone-orange { --tone: var(--orange); --tone-soft: var(--orange-soft); }

.top-band {
  background: var(--bg-band);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.pill-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--tone, var(--accent));
  border-radius: var(--radius-full);
  padding: 3px 12px;
}

/* 確認用（デモ）の環境でだけ出る看板（public/demo-banner.js） */
.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--orange-soft);
  border-bottom: 2px solid var(--orange);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 10px 16px;
  text-align: center;
}
.demo-banner strong {
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 1px 10px;
  font-size: 0.75rem;
}