/**
 * LEAD BIRD brand design tokens — single source of truth.
 * Use CSS variables in custom CSS; use bg-brand-* / text-brand-* / font-* in Tailwind.
 */
:root {
    /* Typography */
    --brand-font-heading: "Arial Black", Impact, sans-serif;
    --brand-font-body: "Google Sans Flex", "Google Sans", sans-serif;
    /* Primary */
    --brand-blue: #0038ff;
    --brand-blue-dark: #001a99;
    --brand-lime: #ccff00;
    --brand-lime-hover: #d8ff33;

    /* Accent & neutrals */
    --brand-red: #ff3b30;
    --brand-white: #ffffff;
    --brand-black: #000000;
    --brand-surface: #f8f9fa;
    --brand-badge-muted: rgb(204 255 0 / 0.14);
    --brand-avatar: #d2b48c;

    /* Instagram gradient stops */
    --brand-instagram-purple: #833ab4;
    --brand-instagram-red: #fd1d1d;
    --brand-instagram-orange: #fcaf45;

    /* Product icon tints (nav dropdown) */
    --brand-whatsapp-bg: #ecfdf3;
    --brand-whatsapp: #16a34a;
    --brand-instagram-icon-bg: #fdf2f8;
    --brand-instagram-icon: #db2777;
    --brand-tiktok-icon-bg: #f8fafc;
    --brand-tiktok-icon: #0f172a;

    /* Effects */
    --brand-grid-line: rgb(255 255 255 / 0.082);
    --brand-lime-shadow: rgb(204 255 0 / 0.35);
    --brand-lime-shadow-strong: rgb(204 255 0 / 0.45);
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.brand-font-heading {
    font-family: var(--brand-font-heading);
}

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

.brand-grid-bg {
    background-image:
        linear-gradient(to right, var(--brand-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--brand-grid-line) 1px, transparent 1px);
    background-size: 4rem 4rem;
}

.shadow-brand-lime {
    box-shadow: 0 10px 40px var(--brand-lime-shadow);
}

.shadow-brand-lime-hover:hover {
    box-shadow: 0 14px 48px var(--brand-lime-shadow-strong);
}