@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Design tokens as CSS custom properties */
    :root {
        --color-parchment:  #fdf8f0;
        --color-forest:     #2d6a4f;
        --color-forest-dark:#1b4332;
        --color-ember:      #e76f51;
        --color-gold:       #f4a261;
        --color-slate:      #334155;
    }

    html { @apply scroll-smooth; }

    body {
        background-color: var(--color-parchment);
        color: var(--color-slate);
    }

    /* Dark mode */
    .dark {
        --color-parchment: #1a1a2e;
        --color-slate:     #e2e8f0;
    }

    /* Display font for headings */
    .font-display { font-family: 'Cinzel', 'Georgia', serif; }
}

@layer utilities {
    .bg-parchment { background-color: var(--color-parchment); }
    .bg-forest    { background-color: var(--color-forest); }
    .text-forest  { color: var(--color-forest); }
    .text-ember   { color: var(--color-ember); }
    .text-gold    { color: var(--color-gold); }
    .border-forest { border-color: var(--color-forest); }
}