/**
 * Brand design tokens for the homepage redesign blocks.
 *
 * The compiled theme CSS only exposes Bootstrap-internal custom properties
 * (e.g. --bs-purple is #3E0070, --bs-dark-blue is #070545) which don't map to
 * the Figma brand palette, and WordPress isn't emitting --wp--preset--color--*
 * here. So these tokens are the single source of truth for the redesign colors.
 *
 * Each token's hex is noted so the blocks can be ported if the theme changes.
 * Also defines the background-color utility classes for the new palette swatches
 * (Lavender / Brand Purple / Brand Dark), which the compiled CSS predates.
 */

:root {
    --kipu-brand-purple: #6230C2;   /* Figma brand primary: hero accent, stat values, whitepaper band */
    --kipu-brand-dark: #1A1030;     /* Figma brand dark: CTA band background */
    --kipu-brand-lavender: #EEE9FC; /* Figma brand light: resources section background */
    --kipu-accent-purple: #8B5CF6;  /* stat labels */
    --kipu-accent-light: #C4B5FD;   /* whitepaper / CTA eyebrow text */
    --kipu-purple: #6C18C9;         /* theme "Purple": feature bullet icon + title */
    --kipu-divider: #B5B9FF;        /* theme "Light Blue": stat divider */
    --kipu-card-border: #8C80AA;    /* review card border */
    --kipu-bullet-hover: #F4F0FB;   /* feature bullet hover background */
}

.has-lavender-background-color { background-color: var(--kipu-brand-lavender); }
.has-brand-purple-background-color { background-color: var(--kipu-brand-purple); }
.has-brand-dark-background-color { background-color: var(--kipu-brand-dark); }

/* The block editor's editor.css omits the brand button gradient (it falls back to
   Bootstrap's purple .btn-primary), so the orange brand button is restored here for
   editor / front-end parity. Mirrors the values in styles.min.css. Harmless on the
   front end (same declarations, loaded after the main stylesheet). */
.btn.btn-primary {
    background-image: linear-gradient(90deg, #ff8f66, #ffae70 50%, #ff8f66 100%);
    background-size: 200%;
    color: #070545;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.44px;
    border: none;
    text-transform: uppercase;
    transition: 250ms ease all;
}

.btn.btn-primary:hover {
    color: initial;
    background-position: 50%;
}