/*
 * Handy Finance — brand theme
 * Core brand colors are exposed as CSS custom properties so they can be used
 * outside Tailwind utilities (inline styles, third-party widgets, raw CSS).
 * The same palette is registered with Tailwind via the inline `tailwind.config`
 * in each base template (navy, navydark, brandblue, brandlight, brandred,
 * brandreddark).
 */
:root {
    /* Core brand colors (duplicated as Tailwind utilities) */
    --hf-navy: #004a8f;   /* primary brand blue — headers, links */
    --hf-blue: #0a76c2;   /* bright accent blue */
    --hf-red:  #c8102e;   /* CTA / accent red — buttons */

    /* Supporting shades */
    --hf-navy-dark: #002f5f;  /* hero gradient top, hovers */
    --hf-brand-light: #e8f3fb; /* pale blue backgrounds / tints */
    --hf-red-dark: #a50d26;   /* darker red — button hover */
}

/* Brand typeface */
body {
    font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/*
 * Hero banner gradient: navy → blue.
 * Apply to a hero/banner element, typically layered over a background image.
 */
.hf-hero-gradient {
    background-image: linear-gradient(
        135deg,
        rgba(0, 47, 95, 0.92) 0%,
        rgba(0, 74, 143, 0.78) 55%,
        rgba(10, 118, 194, 0.55) 100%
    );
}