/*
  YELL デザイントークン（v1）
  部品・レイアウト・シミュレーターは、色や余白をここの変数から取る（値を直接書かない）。
  ブランドカラーは YELL for ALL 公式サイト・ロゴを基準にしている。

  文字に使う色は、白（#fff）と背景（#f5f5f5）の両方で 4.5:1 以上（WCAG AA）。
  #5cb531（ブランドの緑）は 2.6:1 なので、面・アイコン・装飾だけに使い、文字には使わない。
*/

:root,
[data-md-color-scheme="default"] {
  /* ── ブランド ── */
  --yell-brand-green: #5cb531;        /* 面・アイコン・装飾（文字には使わない） */
  --yell-color-primary: #407e22;      /* 文字・リンク・白文字ボタンの背景 */
  --yell-color-primary-strong: #2f5e18;
  --yell-color-on-primary: #ffffff;
  --yell-color-primary-soft: #eef7e8; /* 薄い面 */
  --yell-color-secondary: #0c7789;    /* 見出し・強調（公式サイトの大見出し） */
  --yell-color-accent: #ffe13d;       /* マーカー・ハイライトの背景だけ（文字には使わない） */
  --yell-color-accent-soft: #fff5ad;

  /* ── 教科（色だけで教科を伝えない。必ず教科名を添える） ── */
  --yell-subject-math: #1a6fb5;
  --yell-subject-english: #7b4bab;
  --yell-subject-science: #007e75;
  --yell-subject-social: #9d640b;
  --yell-subject-japanese: #c2405a;

  /* ── 面と文字 ── */
  --yell-color-background: #f5f5f5;
  --yell-color-surface: #ffffff;
  --yell-color-surface-sunken: #f2f4f1;
  --yell-color-text: rgb(0 0 0 / 87%);
  --yell-color-text-muted: rgb(0 0 0 / 60%);
  --yell-color-border: rgb(0 0 0 / 12%);

  /* ── 学習のフィードバック（色だけで伝えない。アイコンと文言を必ず添える） ── */
  --yell-feedback-correct: #2e7d32;
  --yell-feedback-retry: #a2560c;     /* 「もう少し！」。赤を使わず、否定的に見せない */
  --yell-feedback-hint-surface: var(--yell-color-accent-soft);

  /* ── 図版（数直線など）の意味の色 ── */
  --yell-figure-positive: #1565c0;
  --yell-figure-negative: #b71c1c;
  --yell-figure-result: #2e7d32;
  --yell-figure-neutral: #555555;
  --yell-figure-ink: #333333;

  /* ── 文字 ── */
  --yell-font-body: var(--md-text-font-family, "Roboto"), "Hiragino Sans", "Noto Sans JP", sans-serif;
  --yell-font-size-sm: 0.75rem;
  --yell-font-size-md: 0.85rem;
  --yell-font-size-lg: 1.1rem;
  --yell-font-size-xl: 1.6rem;
  --yell-font-weight-bold: 700;
  --yell-line-height: 1.8;

  /* ── 余白・角丸・影 ── */
  --yell-space-1: 0.25rem;
  --yell-space-2: 0.5rem;
  --yell-space-3: 0.75rem;
  --yell-space-4: 1rem;
  --yell-space-5: 1.5rem;
  --yell-space-6: 2.5rem;
  --yell-radius-sm: 0.3rem;
  --yell-radius-md: 0.6rem;
  --yell-radius-lg: 1rem;
  --yell-shadow-sm: 0 1px 3px rgb(0 0 0 / 8%);

  /* ── 幅（画面幅の区切りは CSS 変数を media query に使えないため、値を決めてここに記録する）
       スマホ < 600px ≦ タブレット < 960px ≦ パソコン ── */
  --yell-reading-width: 46rem;        /* 文章を読む幅 */
  --yell-wide-width: 64rem;           /* 操作する部分・Visual Lab の幅 */
  --yell-lesson-width: var(--yell-reading-width);

  /* ── 動き（理解を助けるときだけ使う） ── */
  --yell-duration-fast: 120ms;
  --yell-duration-normal: 200ms;
  --yell-easing: cubic-bezier(0.2, 0, 0, 1);

  /* ── Material の色を YELL の色にそろえる ── */
  --md-primary-fg-color: var(--yell-color-primary);
  --md-primary-fg-color--light: var(--yell-brand-green);
  --md-primary-fg-color--dark: var(--yell-color-primary-strong);
  --md-primary-bg-color: var(--yell-color-on-primary);
  --md-primary-bg-color--light: rgb(255 255 255 / 70%);
  --md-accent-fg-color: var(--yell-color-secondary);
  --md-accent-fg-color--transparent: rgb(12 119 137 / 10%);
  --md-typeset-a-color: var(--yell-color-primary);
}

[data-md-color-scheme="slate"] {
  --yell-color-primary: #7ed957;
  --yell-color-primary-strong: #2f5e18;
  --yell-color-on-primary: #10200a;
  --yell-color-primary-soft: rgb(126 217 87 / 12%);
  --yell-color-secondary: #4fb3c0;
  --yell-color-accent-soft: rgb(255 225 61 / 14%);

  --yell-subject-math: #4a8dc4;
  --yell-subject-english: #9d79c0;
  --yell-subject-science: #26978f;
  --yell-subject-social: #b08032;
  --yell-subject-japanese: #ce687c;

  --yell-color-background: var(--md-default-bg-color);
  --yell-color-surface: var(--md-default-bg-color);
  --yell-color-surface-sunken: rgb(255 255 255 / 5%);
  --yell-color-text: var(--md-default-fg-color);
  --yell-color-text-muted: var(--md-default-fg-color--light);
  --yell-color-border: var(--md-default-fg-color--lightest);

  --yell-feedback-correct: #81c784;
  --yell-feedback-retry: #ffb74d;

  --yell-figure-positive: #82b1ff;
  --yell-figure-negative: #ff8a80;
  --yell-figure-result: #81c784;
  --yell-figure-neutral: #b0bec5;
  --yell-figure-ink: #e0e0e0;

  --md-primary-fg-color: #2f5e18;     /* ヘッダーの面（白文字 7.6:1） */
  --md-primary-fg-color--dark: #234812;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--yell-color-secondary);
  --md-typeset-a-color: var(--yell-color-primary);
}

/* 動きを減らす設定の人には、アニメーションと滑らかなスクロールをやめる */
@media (prefers-reduced-motion: reduce) {
  :root {
    --yell-duration-fast: 0ms;
    --yell-duration-normal: 0ms;
  }

  html {
    scroll-behavior: auto !important;
  }

  .yell-page *,
  .yell-page *::before,
  .yell-page *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

@media print {
  :root,
  [data-md-color-scheme="slate"] {
    --yell-figure-positive: #1565c0;
    --yell-figure-negative: #b71c1c;
    --yell-figure-result: #2e7d32;
    --yell-figure-neutral: #555555;
    --yell-figure-ink: #000000;
  }
}