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

:root {
    /* Paleta de colores orgánicos y cálidos */
    --color-bg-cream: #FAF6F0;
    --color-bg-card: #FDFBF7;
    --color-terracotta: #D37B63;
    --color-terracotta-dark: #B65F4A;
    --color-sage: #8B9D83;
    --color-sage-dark: #6D7F66;
    --color-gold: #D4AF37;
    --color-text-main: #2C2C2C;
    --color-text-muted: #595959;

    /* Sombras sutiles y coloreadas */
    --shadow-soft: 0 4px 20px rgba(182, 95, 74, 0.05);
    --shadow-soft-hover: 0 8px 30px rgba(182, 95, 74, 0.12);

    /* Tipografías web */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'DM Sans', sans-serif;
}

@layer base {
    html {
        background-color: var(--color-bg-cream);
        color: var(--color-text-main);
        font-family: var(--font-body);
    }

    body {
        background-color: transparent;
        color: var(--color-text-main);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-heading {
        font-family: var(--font-heading);
        color: var(--color-text-main);
    }
}

@layer components {
    .btn-primary {
        background-color: rgba(211, 123, 99, 0.15);
        /* Soft Terracotta */
        color: var(--color-terracotta-dark);
        padding: 0.75rem 2rem;
        border-radius: 9999px;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        box-shadow: none;
        cursor: pointer;
    }

    .btn-primary:hover {
        background-color: var(--color-terracotta);
        color: var(--color-bg-cream);
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft-hover);
    }

    .btn-secondary {
        background-color: rgba(139, 157, 131, 0.15);
        /* Soft Sage */
        color: var(--color-sage-dark);
        padding: 0.75rem 2rem;
        border-radius: 9999px;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        box-shadow: none;
        cursor: pointer;
    }

    .btn-secondary:hover {
        background-color: var(--color-sage);
        color: var(--color-bg-cream);
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft-hover);
    }

    .card-book {
        background-color: var(--color-bg-card);
        border-radius: 24px;
        box-shadow: var(--shadow-soft);
        transition: all 0.4s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid transparent;
    }

    .card-book:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-soft-hover);
    }
}