/* わくわく素材 color tokens — warm cream base + coral/orange pop accents */
:root {
  /* Base palette */
  --cream-0: #fffefb; /* page background (light) */
  --cream-1: #fff9f0; /* subtle section tint */
  --cream-2: #fbf1e4; /* hover tint / wells */
  --white: #ffffff;
  --ink-1: #3d2e28; /* warm near-black text */
  --ink-2: #77655b; /* secondary text */
  --ink-3: #7a695d; /* tertiary — 実測補正: 最暗背景 cream-2 上でも 4.69:1(元 #8e7b6e は 3.99:1) */
  --line-1: #f2e6d8; /* hairline borders */
  --line-2: #e5d3c0; /* stronger borders / inputs */

  /* Accents — matched chroma, lightness tuned for WCAG AA */
  --coral: oklch(0.59 0.19 24); /* primary — axe 実測補正で白文字 4.52:1(元 0.6 は 4.32:1) */
  --coral-strong: oklch(0.52 0.18 24); /* hover / リンク・白地上のテキスト用 */
  --coral-soft: oklch(0.95 0.035 22); /* tinted chip bg */
  --tangerine: oklch(0.68 0.16 60); /* secondary accent */
  --tangerine-soft: oklch(0.95 0.04 60);
  --tangerine-text: oklch(0.5 0.13 60); /* 白/ソフト地上のテキスト用 */

  /* Semantic — テキスト/バッジで使ってもAAを満たす明度 */
  --success: oklch(0.51 0.13 155); /* 実測補正: soft 上 4.59:1(元 0.52 は 4.41:1) */
  --success-soft: oklch(0.94 0.05 155);
  --warning: oklch(0.53 0.13 80); /* 実測補正: soft 上 4.60:1(元 0.55 は 4.23:1) */
  --warning-soft: oklch(0.95 0.05 80);
  --danger: oklch(0.54 0.19 28);
  --danger-soft: oklch(0.94 0.04 28);
  --info: oklch(0.52 0.12 240);
  --info-soft: oklch(0.94 0.04 240);

  /* Semantic aliases */
  --bg-page: var(--cream-0);
  --bg-subtle: var(--cream-1);
  --bg-well: var(--cream-2);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --text-body: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-on-accent: #ffffff;
  --border-subtle: var(--line-1);
  --border-strong: var(--line-2);
  --accent: var(--coral);
  --accent-hover: var(--coral-strong);
  --accent-soft: var(--coral-soft);
  --accent-2: var(--tangerine);
  --accent-2-soft: var(--tangerine-soft);
  --focus-ring: oklch(
    0.59 0.19 24 / 0.75
  ); /* 実測補正: 白地合成後 3.15:1(元 alpha 0.4 は 1.80:1) */
  --link: var(--coral-strong);
  --link-hover: var(--coral);
}

/* Dark theme (secondary) — warm charcoal, same accents lifted slightly */
[data-theme="dark"] {
  --bg-page: #211b18;
  --bg-subtle: #2a231f;
  --bg-well: #332b26;
  --surface-card: #2c2521;
  --surface-raised: #362e29;
  --text-body: #f5ede6;
  --text-muted: #c4b4a9;
  --text-faint: #9c8b80;
  --border-subtle: #3b322c;
  --border-strong: #4c4038;
  --accent: oklch(0.7 0.18 22);
  --accent-hover: oklch(0.76 0.16 22);
  --accent-soft: oklch(0.32 0.06 22);
  --accent-2: oklch(0.75 0.15 60);
  --accent-2-soft: oklch(0.33 0.06 60);
  --success-soft: oklch(0.32 0.06 155);
  --warning-soft: oklch(0.33 0.06 80);
  --danger-soft: oklch(0.31 0.06 28);
  --info-soft: oklch(0.31 0.05 240);
  --link: oklch(0.76 0.16 22);
  --link-hover: oklch(0.82 0.13 22);

  /* 明るくした accent 上では白文字が 2.90:1 に落ちるため文字側を暗転(5.87:1) */
  --text-on-accent: #211b18;
  /* テキスト系セマンティックも持ち上げ(ライト値のままだと soft 上 2.0〜2.5:1) */
  --tangerine-text: oklch(0.8 0.12 60); /* accent-2-soft 上 6.48:1 */
  --success: oklch(0.8 0.13 155); /* success-soft 上 6.92:1 */
  --warning: oklch(0.8 0.12 80); /* warning-soft 上 6.56:1 */
  --danger: oklch(0.78 0.12 28); /* danger-soft 上 6.47:1 */
  --info: oklch(0.78 0.1 240); /* info-soft 上 6.65:1 */
  /* ライト値のままでは合成後 1.59:1。alpha 0.65 で実効 3.21:1(非テキスト 3:1) */
  --focus-ring: oklch(0.7 0.18 22 / 0.65);
}
/* わくわく素材 typography tokens */
:root {
  --text-hero: 800 40px / 1.25 var(--font-display); /* トップのヒーロー */
  --text-h1: 800 28px / 1.35 var(--font-display); /* ページタイトル */
  --text-h2: 700 22px / 1.4 var(--font-display); /* セクション見出し */
  --text-h3: 700 17px / 1.5 var(--font-sans); /* カード見出し */
  /* 色トークン --text-body(colors 由来)と衝突するため font 側は -font を付ける */
  --text-body-font: 500 15px / 1.8 var(--font-sans); /* 本文 */
  --text-small: 500 13px / 1.6 var(--font-sans); /* 補足・メタ情報 */
  --text-caption: 500 11.5px / 1.5 var(--font-sans); /* タグ・バッジ */
  --text-button: 700 14px / 1 var(--font-sans);
  --text-mono: 500 12.5px / 1.6 var(--font-mono);

  --tracking-display: 0.01em;
  --tracking-body: 0.02em;
}
/* わくわく素材 spacing & radius tokens */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  /* まるっとした radius が基本。カードは 16, ボタン/チップは full pill */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --page-max: 1200px;
  --header-h: 64px;
}
/* わくわく素材 shadow / motion tokens */
:root {
  /* 温かみのある茶系シャドウ。黒シャドウは使わない */
  --shadow-card: 0 1px 2px oklch(0.4 0.05 50 / 0.06), 0 4px 12px oklch(0.4 0.05 50 / 0.07);
  --shadow-hover: 0 2px 4px oklch(0.4 0.05 50 / 0.08), 0 10px 24px oklch(0.4 0.05 50 / 0.12);
  --shadow-pop: 0 8px 32px oklch(0.4 0.08 30 / 0.18);
  --shadow-accent: 0 4px 14px oklch(0.6 0.19 24 / 0.35);

  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* ちょい跳ねる */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}
[data-theme="dark"] {
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-hover: 0 2px 4px oklch(0 0 0 / 0.35), 0 10px 24px oklch(0 0 0 / 0.45);
  --shadow-pop: 0 8px 32px oklch(0 0 0 / 0.55);
}

/* fonts (Google Fonts は _renderer.tsx の <link> で読み込み) */
:root {
  --font-display: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --font-sans: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;
}