@import "tailwindcss";

@theme {
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
  --font-sans: "Bricolage Grotesque", sans-serif;

  --color-bg: var(--c-bg);
  --color-surface: var(--c-surface);
  --color-border: var(--c-border);
  --color-text: var(--c-text);
  --color-muted: var(--c-muted);
  --color-accent: var(--c-accent);
  --color-accent-hover: var(--c-accent-hover);
  --color-accent-subtle: var(--c-accent-subtle);
  --color-danger: var(--c-danger);
}

:root {
  --c-bg: #fdf8f2;
  --c-surface: #f5ede0;
  --c-border: #e0d0c0;
  --c-text: #1c1410;
  --c-muted: #9a8070;
  --c-accent: #b08855;
  --c-accent-hover: #8f6e3f;
  --c-accent-subtle: #f5e8d5;
  --c-danger: #b91c1c;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #100c09;
    --c-surface: #1a1410;
    --c-border: #2e2218;
    --c-text: #f0e8df;
    --c-muted: #9e8878;
    --c-accent: #c4956a;
    --c-accent-hover: #d4a87c;
    --c-accent-subtle: rgba(196, 149, 106, 0.1);
    --c-danger: #f87171;
  }
}