/* MIRAI Design System — theme: ECC Junior 桑名藤が丘4丁目教室 — v2 "warm atelier"
   Audience: 桑名市のお母さん(意思決定者) + 2歳〜中学生。
   Aesthetic: 温かく作り込まれた "子ども英語アトリエ" — editorial × friendly。
   原色kids配色を脱し、支配色コーラル + ディープティール + 黄土(オーカー) on 温クリーム
   の調和トリオに。glow/grain の tech 感は中和し、層状ソフトシャドウと余白で品位を出す。
   Type: Zen Maru Gothic(JP丸ゴ display) × Baloo 2(Latin) × Zen Kaku Gothic New(本文)
       × IBM Plex Mono(ラベル) × Fraunces(編集的な飾り番号・斜体).
   Load AFTER base.css to override the token contract. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

:root,
[data-theme="light"]{
  --ds-bg:#fff8ee;            --ds-surface:#ffffff;
  --ds-text:#2a2018;          --ds-text-dim:rgba(42,32,24,.6);
  --ds-line:rgba(42,32,24,.12); --ds-line-soft:rgba(42,32,24,.055);

  --ds-accent:#e8472b;        --ds-accent-ink:#fff8ee;  --ds-flag:#df9b27;

  /* refined warm trio + supports */
  --ecc-coral:#e8472b;  --ecc-teal:#1d8378;  --ecc-ochre:#df9b27;
  --ecc-yellow:#ffce4d;
  --ecc-cream:#fff0d6;  --ecc-paper:#fdf2e2;

  --ds-font-display:'Zen Maru Gothic',sans-serif;     /* JP rounded display */
  --ds-font-display-en:'Baloo 2',sans-serif;          /* Latin              */
  --ds-font-num:'Fraunces',serif;                     /* editorial numerals */
  --ds-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ds-font-body:'Zen Kaku Gothic New',system-ui,sans-serif;

  --ds-radius:22px;  --ds-maxw:1180px;
  --ds-display:clamp(2.5rem,6vw,4.7rem);

  /* layered, warm, soft shadows (depth without AI glow) */
  --ds-shadow:0 2px 4px rgba(120,70,20,.04),0 18px 42px -26px rgba(120,70,20,.30);
  --ds-shadow-lg:0 6px 12px rgba(120,70,20,.06),0 44px 76px -36px rgba(120,70,20,.42);
}

/* ---- atmosphere: warm sunshine wash, no tech grit ----------- */
.ds-grain::after{display:none}
.ds-glow{background-image:
  radial-gradient(52vw 46vh at 2% -12%, color-mix(in srgb,var(--ecc-yellow) 40%,transparent), transparent 58%),
  radial-gradient(46vw 46vh at 106% -4%, color-mix(in srgb,var(--ecc-coral) 14%,transparent), transparent 56%);}

/* ---- friendly editorial eyebrow ----------------------------- */
.ds-kicker{font-family:var(--ds-font-display-en);text-transform:none;letter-spacing:.01em;
  font-weight:700;font-size:.95rem;color:var(--ds-accent);gap:.55rem}
.ds-kicker::before{width:26px;height:3px;border-radius:3px;background:var(--ds-accent);opacity:1}

.ds-display{font-weight:900;line-height:1.12;letter-spacing:.005em}

/* yellow highlighter behind a word */
mark.ds-hl::before{background:var(--ecc-yellow);height:.42em;bottom:.04em;border-radius:3px}

/* ---- buttons: rounded pill, warm layered shadow ------------- */
.ds-btn{border-radius:999px;font-family:var(--ds-font-body);font-weight:700;font-size:1rem;padding:1rem 1.75rem}
.ds-btn--primary{background:var(--ds-accent);color:var(--ds-accent-ink);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--ds-accent) 62%,transparent)}
.ds-btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px color-mix(in srgb,var(--ds-accent) 72%,transparent)}
.ds-btn--ghost{border:1.5px solid color-mix(in srgb,var(--ds-accent) 38%,var(--ds-line));color:var(--ds-accent)}
.ds-btn--ghost:hover{border-color:var(--ds-accent);background:color-mix(in srgb,var(--ds-accent) 7%,transparent)}

/* ---- card: rounded, soft layered warm shadow ---------------- */
.ds-card{border-radius:var(--ds-radius);border:1px solid var(--ds-line);background:var(--ds-surface);box-shadow:var(--ds-shadow)}

.ds-stat .big{font-weight:800}
.ds-stats{border-top:1px solid var(--ds-line)}