/* HARUNOWA ブランドカラー・フォント（通常 CSS。ビルド不要） */
:root {
  --color-cream: #fdfaf6;
  --color-cream-2: #f1ebdc;
  --color-cream-paper: #fff9ee;
  --color-kraft: #d9c4a3;
  --color-forest: #5c8b5c;
  --color-forest-dark: #3d5c3d;
  --color-forest-light: #c2d4c2;
  --color-forest-soft: #e8eee3;
  --color-warm: #c97843;
  --color-warm-soft: #f5dfc8;
  --color-ink: #2a2520;
  --color-ink-2: #5c5247;
  --color-ink-3: #948776;
  --color-line: #d9c8a8;
  --color-laser: #e85a3c;
  --shadow-stamp: 5px 5px 0 #5c8b5c;
  --shadow-stamp-lg: 8px 8px 0 #5c8b5c;
  --shadow-stamp-sm: 3px 3px 0 #5c8b5c;
}

.font-sans { font-family: "Noto Sans JP", sans-serif; }
.font-hand { font-family: "Klee One", "Noto Sans JP", 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-cream-paper { background-color: var(--color-cream-paper); }
.bg-cream-paper\/10 { background-color: color-mix(in srgb, var(--color-cream-paper) 10%, transparent); }
.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\/20 { background-color: color-mix(in srgb, var(--color-forest) 20%, transparent); }
.bg-forest-soft { background-color: var(--color-forest-soft); }
.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\/50 { color: color-mix(in srgb, var(--color-cream-paper) 50%, transparent); }
.text-cream-paper\/70 { color: color-mix(in srgb, var(--color-cream-paper) 70%, transparent); }
.text-cream-paper\/75 { color: color-mix(in srgb, var(--color-cream-paper) 75%, transparent); }
.text-cream-paper\/80 { color: color-mix(in srgb, var(--color-cream-paper) 80%, 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: #9a5528; }
.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-forest-dark { border-color: var(--color-forest-dark); }
.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); }

.from-forest\/40 {
  --tw-gradient-from: color-mix(in srgb, var(--color-forest) 40%, transparent);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}
.via-laser\/60 {
  --tw-gradient-via: color-mix(in srgb, var(--color-laser) 60%, transparent);
  --tw-gradient-stops: var(--tw-gradient-from, transparent), var(--tw-gradient-via), var(--tw-gradient-to, transparent);
}

.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); }
.hover\:bg-forest-soft\/30:hover { background-color: color-mix(in srgb, var(--color-forest-soft) 30%, transparent); }

.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); }