/* HARUNOWA ブランドカラー・フォント（color-v1: クリーム×木目×#333） */
:root {
  --color-cream: #fffef2;
  --color-cream-2: #f5f5f0;
  --color-collab-bg: #e6e6e2;
  --color-cream-paper: #fffef2;
  --color-kraft: #c9b896;
  --color-forest: #a07850;
  --color-forest-dark: #6b4f35;
  --color-forest-light: #d4c4a8;
  --color-forest-soft: #f2ebe0;
  --color-warm: #8b6914;
  --color-warm-soft: #ede4d4;
  --color-ink: #333333;
  --color-ink-2: #555555;
  --color-ink-3: #888888;
  --color-line: #e0e0dc;
  --shadow-stamp: 5px 5px 0 var(--color-forest-dark);
  --shadow-stamp-lg: 8px 8px 0 var(--color-forest-dark);
  --shadow-stamp-sm: 3px 3px 0 var(--color-forest-dark);
}

.font-sans { font-family: "Zen Kaku Gothic New", sans-serif; }
.font-hand { font-family: "M PLUS Rounded 1c", "Zen Kaku Gothic New", sans-serif; }
.font-mono { font-family: "DM Mono", monospace; }

.bg-cream { background-color: var(--color-cream); }
.bg-cream\/90 { background-color: color-mix(in srgb, var(--color-cream) 90%, transparent); }
.bg-cream-2 { background-color: var(--color-cream-2); }
.bg-collab { background-color: var(--color-collab-bg); }
.bg-cream-paper { background-color: var(--color-cream-paper); }
.bg-white { background-color: #ffffff; }
.bg-kraft\/70 { background-color: color-mix(in srgb, var(--color-kraft) 70%, transparent); }
.bg-kraft\/80 { background-color: color-mix(in srgb, var(--color-kraft) 80%, transparent); }
.bg-forest { background-color: var(--color-forest); }
.bg-forest-dark { background-color: var(--color-forest-dark); }
.bg-forest\/15 { background-color: color-mix(in srgb, var(--color-forest) 15%, transparent); }
.bg-forest\/20 { background-color: color-mix(in srgb, var(--color-forest) 20%, transparent); }
.bg-warm\/15 { background-color: color-mix(in srgb, var(--color-warm) 15%, transparent); }
.bg-forest-soft { background-color: var(--color-forest-soft); }
.bg-forest-soft\/50 { background-color: color-mix(in srgb, var(--color-forest-soft) 50%, transparent); }
.bg-forest-soft\/70 { background-color: color-mix(in srgb, var(--color-forest-soft) 70%, transparent); }
.bg-warm { background-color: var(--color-warm); }
.bg-warm-soft { background-color: var(--color-warm-soft); }
.bg-warm-soft\/60 { background-color: color-mix(in srgb, var(--color-warm-soft) 60%, transparent); }
.bg-ink { background-color: var(--color-ink); }
.bg-ink-3 { background-color: var(--color-ink-3); }
.bg-ink\/50 { background-color: color-mix(in srgb, var(--color-ink) 50%, transparent); }
.bg-ink\/60 { background-color: color-mix(in srgb, var(--color-ink) 60%, transparent); }

.text-ink { color: var(--color-ink); }
.text-ink-2 { color: var(--color-ink-2); }
.text-ink-3 { color: var(--color-ink-3); }
.text-cream-paper { color: var(--color-cream-paper); }
.text-cream-paper\/70 { color: color-mix(in srgb, var(--color-cream-paper) 70%, transparent); }
.text-cream-paper\/85 { color: color-mix(in srgb, var(--color-cream-paper) 85%, transparent); }
.text-cream-paper\/90 { color: color-mix(in srgb, var(--color-cream-paper) 90%, transparent); }
.text-forest { color: var(--color-forest); }
.text-forest-dark { color: var(--color-forest-dark); }
.text-forest-light { color: var(--color-forest-light); }
.text-warm { color: var(--color-warm); }
.text-warm-dark { color: var(--color-forest-dark); }
.text-kraft { color: var(--color-kraft); }

.border-ink { border-color: var(--color-ink); }
.border-forest { border-color: var(--color-forest); }
.border-forest\/50 { border-color: color-mix(in srgb, var(--color-forest) 50%, transparent); }
.border-line { border-color: var(--color-line); }
.border-warm { border-color: var(--color-warm); }
.border-cream-paper\/20 { border-color: color-mix(in srgb, var(--color-cream-paper) 20%, transparent); }
.border-cream-paper\/30 { border-color: color-mix(in srgb, var(--color-cream-paper) 30%, transparent); }

.shadow-stamp { box-shadow: var(--shadow-stamp); }
.shadow-stamp-sm { box-shadow: var(--shadow-stamp-sm); }
.shadow-stamp-lg { box-shadow: var(--shadow-stamp-lg); }

.hover\:text-forest-dark:hover { color: var(--color-forest-dark); }
.hover\:text-cream-paper:hover { color: var(--color-cream-paper); }
.hover\:shadow-stamp:hover { box-shadow: var(--shadow-stamp); }
.hover\:shadow-stamp-sm:hover { box-shadow: var(--shadow-stamp-sm); }
.hover\:shadow-stamp-lg:hover { box-shadow: var(--shadow-stamp-lg); }

.group\/timeline:hover .group-hover\/timeline\:bg-warm { background-color: var(--color-warm); }
.group\/timeline:hover .group-hover\/timeline\:border-warm { border-color: var(--color-warm); }
.group\/timeline:hover .group-hover\/timeline\:shadow-stamp-sm { box-shadow: var(--shadow-stamp-sm); }