/*! Angel Samurai — a Ventus template (ventus.works)
 *  Free license: keep the Ventus badge visible. That's the whole deal.
 *  Want it badge-free? Commercial license: shop.ventus.works
 */

/* Angel Samurai Design Tokens — Ghibli-Inspired Magical Realism
 * SOURCE OF TRUTH for all stack variants (html/, react/, vue/, wordpress/).
 * The html/ variant keeps a verbatim copy at html/css/tokens.css because
 * file:// relative imports across folders are fragile. Edit HERE, then sync.
 */

:root {
    /* ---- Palette primitives (from the GretA poster forensic audit) ---- */
    --sakura-pink: #ffb7c5;
    --sakura-light: #ffd1dc;
    --sakura-deep: #e8a0b0;      /* rose coral — dragon body */
    --sky-blue: #87ceeb;
    --cream: #fff8e7;
    --cloud-white: #e8dfd5;
    --warm-beige: #dac8ba;
    --sage-green: #9dc183;
    --dragon-gold: #d4af37;
    --sunflower: #f5c542;
    --signal-red: #c92a2a;
    --warm-brown: #8b4513;
    --ink: #3d3229;

    /* ---- Semantic tokens (components reference ONLY these) ---- */
    --color-bg: #faf4ec;
    --color-bg-alt: #f4ece1;
    --color-surface: #ffffff;
    --color-surface-soft: #fdf3f0;
    --color-heading: #3d3229;
    --color-text: #4a3f35;
    --color-text-muted: #85766a;
    --color-primary: #c92a2a;
    --color-primary-hover: #b02323;
    --color-on-primary: #ffffff;
    --color-accent: #e8a0b0;
    --color-accent-soft: #f5c6d0;
    --color-secondary: #9dc183;
    --color-gold: #d4af37;
    --color-border: rgba(139, 69, 19, 0.14);
    --color-focus: #2e86ab;
    --color-error: #b02323;
    --color-success: #4d7c46;

    /* Sakura particles (JS reads these) */
    --petal-a: #f5c6d0;
    --petal-b: #e8a0b0;

    /* ---- Typography ---- */
    --font-display: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', Georgia, serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --leading-body: 1.7;

    /* ---- Gradients ---- */
    --gradient-sky: linear-gradient(180deg, #cfe6ef 0%, #ece2d6 55%, #faf4ec 100%);
    --gradient-sakura: linear-gradient(135deg, #ffb7c5 0%, #ffd1dc 100%);
    --gradient-brand: linear-gradient(135deg, #c92a2a 0%, #e8a0b0 55%, #f5c542 100%);

    /* ---- Shape & elevation ---- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-soft: 0 4px 16px rgba(61, 50, 41, 0.08);
    --shadow-float: 0 12px 32px rgba(61, 50, 41, 0.14);
    --shadow-glow: 0 8px 32px rgba(232, 160, 176, 0.45);

    /* ---- Motion ---- */
    --ease-dreamy: cubic-bezier(0.4, 0, 0.2, 1);
    --lift: translateY(-4px);
}

/* Sakura petal float animation */
@keyframes float-down {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) translateX(6vw) rotate(360deg);
        opacity: 0;
    }
}

.sakura-petal {
    animation: float-down 8s linear infinite;
}

/* Brush stroke text effect */
.brush-text {
    font-family: var(--font-display);
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}