/* Consumer Guards — brand palette harvested from the live consumerguards.com stylesheet.
 *
 * Every value below marked LIVE is used verbatim by the production site. The two values
 * marked DERIVED are darker tints of the site's own hues, added because the live site
 * pairs white text with #44b64b (2.61:1), which fails WCAG AA — see the role notes on
 * .btn-brand / .btn-accent below.
 *
 * This file is unlayered, and resources/css/style.css puts its `body` rule inside
 * @layer base, so the rules here win the cascade without needing !important. */

:root {
    /* Greens — LIVE */
    --cg-green: #44b64b;          /* site .btn-green, .text-green, .c-green */
    --cg-green-dark: #2ea435;     /* site hover/active */
    --cg-green-light: #58cc5f;
    --cg-green-border: #8cd590;   /* site hover border */
    --cg-green-pale: #e9f9ea;     /* site hover background */

    /* Green — DERIVED: 5.2:1 on white, for green text on light surfaces */
    --cg-green-deep: #2a7c31;

    /* Navy — LIVE (site .btn-blue, .footer, .first-section, .second-section) */
    --cg-navy: #2f3579;
    --cg-navy-pale: #eaebff;

    /* Navy — DERIVED: the dark label on the green CTA, 6.3:1 on #44b64b */
    --cg-navy-deep: #171b3f;

    /* Navy hover, interpolated between --cg-navy and --cg-navy-deep */
    --cg-navy-dark: #262b63;

    /* Ink / neutrals — LIVE */
    --cg-ink: #16161b;
    --cg-body: #3c3c48;           /* site body colour */
    --cg-muted: #464655;
    --cg-border: #e4e4eb;
    --cg-surface: #efeff4;

    /* Danger — LIVE. #f13737 is the site's solid red button; it is only 3.9:1 on
     * white, so text and text-bearing surfaces use the darker #a43131 (6.9:1). */
    --cg-error: #f13737;
    --cg-error-text: #a43131;

    /* Typography — LIVE (the site self-hosts Sora + OpenSans; we pull both from
     * Google Fonts in the layout, with Poppins/system-ui as a real fallback). */
    --cg-font-heading: 'Sora', 'Poppins', system-ui, sans-serif;
    --cg-font-body: 'Open Sans', 'Poppins', system-ui, sans-serif;
}

body {
    font-family: var(--cg-font-body);
    color: var(--cg-body);
}

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

/* Green accent text — only for use on the navy surfaces (5.4:1) */
.text-accent {
    color: var(--cg-green-light);
}

/* Green accent text on white surfaces needs the darker tint (5.2:1) */
.text-accent-on-light {
    color: var(--cg-green-deep);
}

/* Thin green rule under the white header */
.brand-header {
    border-bottom: 3px solid var(--cg-green);
}

/* Rounded navy hero panel — the live site's .first-section is this navy */
.brand-hero {
    background: linear-gradient(135deg, var(--cg-navy) 0%, var(--cg-navy-dark) 100%);
    border-radius: 32px;
    padding: 56px 40px;
}

/* Brand-navy footer bar — the live site's .footer is #2f3579 */
.brand-footer {
    background: linear-gradient(135deg, var(--cg-navy) 0%, var(--cg-navy-dark) 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    margin-top: 56px;
}

/* Green call-to-action button. The label MUST stay dark: white on #44b64b is
 * 2.61:1 and fails AA, while navy-deep on the gradient is 6.3:1. */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--cg-green) 0%, var(--cg-green-dark) 100%);
    color: var(--cg-navy-deep);
    font-weight: 600;
    border-radius: 9999px;
    padding: 14px 32px;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.2s ease;
    box-shadow: 0 8px 20px -8px rgba(68, 182, 75, 0.6);
}

.btn-accent:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Auth / form brand utilities.
   The shared Tailwind build (app.css) only ships generic colour
   utilities, and it loads after this file — so we expose brand-named
   classes here (no name clash with app.css) and use them in the
   consumerguards views instead of `blue-*`/`green-*`.
   ------------------------------------------------------------------ */

/* Brand-navy text + links (11.0:1 and 5.2:1 on white) */
.text-brand { color: var(--cg-navy); }
.link-brand { color: var(--cg-green-deep); font-weight: 600; }
.link-brand:hover { color: var(--cg-navy); text-decoration: underline; }
.hover-text-brand:hover { color: var(--cg-navy); }

/* Solid brand-navy surfaces. Shared markup hardcodes `text-white` on .btn-brand,
 * so this has to be the dark colour: white on navy is 11.0:1. */
.btn-brand { background-color: var(--cg-navy); }
.btn-brand:hover { background-color: var(--cg-navy-dark); }
.chip-brand { background-color: var(--cg-navy); }

/* Green chip, used to pick out list bullets against the navy chips (non-text) */
.chip-accent { background-color: var(--cg-green-dark); }

/* Outline brand button (fills on hover) */
.btn-brand-outline {
    background-color: #fff;
    border-color: var(--cg-navy);
    color: var(--cg-navy);
}
.btn-brand-outline:hover {
    background-color: var(--cg-navy);
    color: #fff;
}

/* Inline validation text — a real danger red, not a brand colour (6.9:1 on white) */
.text-brand-error { color: var(--cg-error-text); }

/* Error / status alert box */
.alert-brand {
    background-color: rgba(164, 49, 49, 0.08);
    border-color: rgba(164, 49, 49, 0.25);
    color: var(--cg-error-text);
}

/* Inputs: focus ring + border, and the @error border state */
.input-brand {
    border-color: var(--cg-border);
}
.input-brand:focus {
    border-color: var(--cg-navy);
    box-shadow: 0 0 0 2px rgba(47, 53, 121, 0.2);
}
.input-brand.is-invalid { border-color: var(--cg-error); }

/* Custom checkbox driven by the sibling `peer` input */
.peer:checked ~ .checkbox-brand {
    background-color: var(--cg-green-dark);
    border-color: var(--cg-green-dark);
}

/* Thin green rule used as a section underline */
.rule-accent {
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--cg-green);
}

/* Brand-tinted drop shadow (welcome icon) */
.shadow-brand { box-shadow: 0 10px 15px -3px rgba(47, 53, 121, 0.3); }

@media (max-width: 768px) {
    .brand-hero {
        padding: 40px 24px;
        border-radius: 24px;
    }
}