/* VeraLabs Instagram Post System
   Haute Couture • Minimalist • Editorial
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@200;300;400;500&family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
    /* Primary Palette - Creamy Minimalist */
    --cream-white: #FAF8F5;
    --ivory: #F7F3ED;
    --champagne: #E8DFD3;
    --nude-beige: #D4C4B0;
    --warm-taupe: #B8A28E;
    --soft-charcoal: #3E3A37;
    --deep-espresso: #1C1917;

    /* Accent Colors */
    --rose-gold: #E8B4B8;
    --pale-gold: #D4AF37;
    --dusty-mauve: #C8A2B8;
    --sage-green: #9CAF88;
    --steel-blue: #7C93A3;

    /* Special Accents */
    --deep-red: #8B0000;
    --rich-brown: #2C1810;
    --deep-teal: #2C5F7C;
    --sage-teal: #7BA39B;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-luxury: 'Bodoni Moda', 'Didot', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Instagram Dimensions */
.post-square {
    width: 1080px;
    height: 1080px;
}

.post-portrait {
    width: 1080px;
    height: 1350px;
}

.post-story {
    width: 1080px;
    height: 1920px;
}

/* Base Post Container */
.post {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Typography Classes */
.font-display {
    font-family: var(--font-display);
}

.font-body {
    font-family: var(--font-body);
}

.font-luxury {
    font-family: var(--font-luxury);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.italic {
    font-style: italic;
}

.light {
    font-weight: 300;
}

.medium {
    font-weight: 500;
}

/* Color Classes */
.bg-cream { background: var(--cream-white); }
.bg-ivory { background: var(--ivory); }
.bg-champagne { background: var(--champagne); }
.bg-espresso { background: var(--deep-espresso); }
.bg-charcoal { background: var(--soft-charcoal); }

.text-cream { color: var(--cream-white); }
.text-ivory { color: var(--ivory); }
.text-espresso { color: var(--deep-espresso); }
.text-taupe { color: var(--warm-taupe); }
.text-gold { color: var(--pale-gold); }
.text-rose { color: var(--rose-gold); }

/* Decorative Elements */
.gold-line {
    width: 60px;
    height: 1px;
    background: var(--pale-gold);
}

.gold-line-vertical {
    width: 1px;
    height: 60px;
    background: var(--pale-gold);
}

.rose-line {
    width: 60px;
    height: 1px;
    background: var(--rose-gold);
}

/* Brand Mark */
.brand-mark {
    font-family: var(--font-luxury);
    font-size: 14px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.brand-mark-large {
    font-family: var(--font-luxury);
    font-size: 18px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Gradient Overlays */
.gradient-fade-up {
    background: linear-gradient(to top, rgba(28, 25, 23, 0.7) 0%, transparent 100%);
}

.gradient-fade-down {
    background: linear-gradient(to bottom, rgba(28, 25, 23, 0.4) 0%, transparent 100%);
}

/* Animation Classes for Web Preview */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Utility Classes */
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 48px; }
.p-lg { padding: 80px; }
.p-xl { padding: 120px; }
.absolute { position: absolute; }
.relative { position: relative; }
.w-full { width: 100%; }
.h-full { height: 100%; }