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

:root {
    --mint: #a2f2e2;
    --lavender: #c3b1e1;
    --blush: #ffb7b7;
    --iceblue: #b8e1ff;
}

.highlight-mint {
    background: linear-gradient(90deg, rgba(162, 242, 226, 0.2) 0%, rgba(162, 242, 226, 0) 100%);
    padding: 0 0.2em;
    margin: 0 -0.2em;
}

.highlight-lavender {
    background: linear-gradient(90deg, rgba(195, 177, 225, 0.2) 0%, rgba(195, 177, 225, 0) 100%);
    padding: 0 0.2em;
    margin: 0 -0.2em;
}

.sketch-container {
    @apply relative;
}

.sketch-image {
    @apply rounded-2xl overflow-hidden h-64 bg-cover bg-center mb-4 shadow-sm;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: white;
    background-blend-mode: multiply;
    background-size: cover;
    position: relative;
}

.sketch-image::before {
    content: '';
    @apply absolute inset-0 rounded-2xl;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
}

.sketch-image::after {
    content: '';
    @apply absolute top-2 right-2 w-16 h-8;
    background-color: #fffb;
    transform: rotate(2deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sketch-caption {
    @apply text-sm text-gray-500 text-center;
}

/* Custom color extensions */
.bg-lavender-300\/70 {
    background-color: rgba(195, 177, 225, 0.7);
}

.bg-iceblue-100\/50 {
    background-color: rgba(184, 225, 255, 0.5);
}

.border-lavender-200\/50 {
    border-color: rgba(195, 177, 225, 0.5);
}

.text-lavender-500 {
    color: #8a6cb5;
}

.bg-rose-50\/10 {
    background-color: rgba(255, 235, 235, 0.1);
}