/*
Theme Name: YokoLife Aesthetics
Author: YokoLife Team
Theme URI: https://yokolife.com
Description: Custom high-performance theme for YOKOLIFE, featuring Aesthesia design system, LMS integration, and flow-state animations.
Version: 1.0
text-domain: yokolife
*/

:root {
    /* Aesthesia Design System Tokens - Beauty Edition */
    --color-ivory: #FDFBF7;
    /* Slightly warmer white */
    --color-charcoal: #4A403A;
    /* Truffle / Warm Grey instead of harsh black */
    --color-rose-start: #E3C29E;
    --color-rose-end: #D4A59A;
    --color-mint-fresh: #ADFEDC;
    --color-peach-soft: #FFDAC8;
    --color-deep-space: #1a1a1a;
    --color-indigo-glow: #818cf8;
    --color-champagne: #F3E5AB;
    --color-ethereal-gold: #C5A059;

    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
}

body {
    background-color: var(--color-ivory);
    color: var(--color-charcoal);
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    font-weight: 700;
}

/* 
   Animation Classes
   Controlled by IntersectionObserver in main.js
*/
.opacity-0 {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}