@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* ---------------------------------------------------------------------------
   Confessions of Grace brand — carried over verbatim from the original site so
   the rebuild looks identical: serif type, warm tan accent, soft grey scale.
   This file is the ONLY place the app's look is defined.
   --------------------------------------------------------------------------- */
@theme {
    --color-primary-50: #f8f9fa;
    --color-primary-100: #e9ecef;
    --color-primary-200: #dee2e6;
    --color-primary-300: #ced4da;
    --color-primary-400: #adb5bd;
    --color-primary-500: #6c757d;
    --color-primary-600: #495057;
    --color-primary-700: #343a40;
    --color-primary-800: #212529;
    --color-primary-900: #121212;

    --color-accent-light: #e2d8c6;
    --color-accent: #9d8c70;
    --color-accent-dark: #695c4a;

    --font-serif: Baskerville, Georgia, "Times New Roman", serif;
    --font-sans: "Helvetica Neue", Arial, sans-serif;
}

@layer base {
    body {
        @apply bg-primary-50 text-primary-800 font-serif;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-serif text-primary-900 mb-4 font-bold;
    }

    h1 { @apply text-3xl md:text-4xl; }
    h2 { @apply text-2xl md:text-3xl; }
    h3 { @apply text-xl md:text-2xl; }

    a {
        @apply text-accent-dark hover:text-accent transition-colors duration-200;
    }

    blockquote {
        @apply border-l-4 border-accent pl-4 italic my-4;
    }
}

@layer components {
    .blog-post {
        @apply prose prose-lg max-w-none;
    }

    .blog-post h1, .blog-post h2, .blog-post h3 {
        @apply border-b border-primary-200 pb-2;
    }

    .button {
        @apply inline-block px-4 py-2 rounded-md bg-accent text-white no-underline shadow-sm
        hover:bg-accent-dark hover:text-white transition-colors duration-200;
    }

    .card {
        @apply bg-white rounded-md shadow-sm p-6 border border-primary-200
        hover:shadow-md transition-shadow duration-200;
    }

    .field {
        @apply w-full rounded-md border border-primary-300 bg-white px-3 py-2 text-primary-800
        focus:border-accent focus:outline-none;
    }
}