/* Shared palette: theme1 is primary; theme2 marks badges.
   Plain CSS custom properties work without a Tailwind build step. */
:root {
  --paper: #dbdbdb;
  --color-theme1-50: #f3f5e8;
  --color-theme1-100: #e3e8ce;
  --color-theme1-200: #c9d2a6;
  --color-theme1-400: #8f9e58;
  --color-theme1-500: #6e7c3c;
  --color-theme1-600: #54622b;
  --color-theme1-700: #404c20;
  --color-theme1-800: #303a18;
  --color-theme1-900: #232b13;
  --color-theme2-50: #ffefed;
  --color-theme2-100: #ffdad6;
  --color-theme2-200: #ffb6af;
  --color-theme2-400: #f35f55;
  --color-theme2-500: #db332c;
  --color-theme2-600: #b51812;
  --color-theme2-700: #8f1006;
  --color-theme2-800: #6c1206;
  --color-theme2-900: #4f1006;
  --theme-accent-hex: #54622b;
  --theme-accent-rgb: 84, 98, 43;
}

html,
body {
  background-color: var(--paper);
}

[data-slot="badge"],
.badge,
.error404-badge {
  background-color: var(--color-theme2-100) !important;
  color: var(--color-theme2-800) !important;
  border-color: var(--color-theme2-200) !important;
}

footer {
  padding-bottom: 0 !important;
}

.footer-stamp {
  margin-top: 3rem;
  background: var(--color-theme1-600);
  color: #fff;
}

.footer-stamp__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1280px;
  margin-inline: auto;
  padding: 22px 2rem;
  font-size: 12px;
  line-height: 1.5;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.footer-heart { display: inline-flex; color: #fff; }
.footer-heart svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.footer-maker { font-weight: 600; }

@media (max-width: 600px) {
  .footer-stamp__inner {
    flex-direction: column;
    gap: 9px;
    text-align: center;
    font-size: 11px;
    padding-inline: 1rem;
  }
}

@supports (color: oklch(50% 0.1 120)) {
  :root {
    --color-theme1-50: oklch(96.5% 0.018 115);
    --color-theme1-100: oklch(92% 0.035 116);
    --color-theme1-200: oklch(84.5% 0.06 117);
    --color-theme1-400: oklch(67% 0.095 119);
    --color-theme1-500: oklch(56% 0.09 120);
    --color-theme1-600: oklch(47% 0.08 121);
    --color-theme1-700: oklch(39.5% 0.068 122);
    --color-theme1-800: oklch(33% 0.055 123);
    --color-theme1-900: oklch(27.5% 0.043 124);
    --color-theme2-50: oklch(96.5% 0.018 25);
    --color-theme2-100: oklch(92% 0.045 25);
    --color-theme2-200: oklch(84.5% 0.09 25);
    --color-theme2-400: oklch(67.5% 0.185 27);
    --color-theme2-500: oklch(58.5% 0.205 28);
    --color-theme2-600: oklch(49.5% 0.19 29);
    --color-theme2-700: oklch(41.5% 0.16 30);
    --color-theme2-800: oklch(34.5% 0.125 31);
    --color-theme2-900: oklch(28.5% 0.095 32);
  }
}