/* Robins Credit Co — red & gold brand palette (taken from the logo) */

:root {
    --rcc-red: #E23670;
    --rcc-red-dark: #B5285A;
    --rcc-gold: #ECCF65;
    --rcc-gold-light: #F3DD8A;
    --rcc-on-gold: #4A1226;
}

/* Solid brand-red surface (hero, footer) */
.bg_brand {
    background: linear-gradient(135deg, var(--rcc-red) 0%, var(--rcc-red-dark) 100%);
}

/* Gold accent text — bright enough to read on the red surface */
.text-gold {
    color: var(--rcc-gold-light);
}

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

/* Rounded red hero panel */
.brand-hero {
    background: linear-gradient(135deg, var(--rcc-red) 0%, var(--rcc-red-dark) 100%);
    border-radius: 32px;
    padding: 56px 40px;
}

/* Brand-red footer bar */
.brand-footer {
    background: linear-gradient(135deg, var(--rcc-red) 0%, var(--rcc-red-dark) 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    margin-top: 56px;
}

/* Gold call-to-action button */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--rcc-gold-light) 0%, #D9B94A 100%);
    color: var(--rcc-on-gold);
    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(236, 207, 101, 0.6);
}

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

/* ------------------------------------------------------------------
   Auth / form brand utilities.
   The shared Tailwind build (app.css) only ships generic `red-*`
   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
   robinscreditco/auth views instead of `red-500`/`red-600`.
   ------------------------------------------------------------------ */

/* Brand-red text + links */
.text-brand { color: var(--rcc-red); }
.link-brand { color: var(--rcc-red); font-weight: 600; }
.link-brand:hover { color: var(--rcc-red-dark); text-decoration: underline; }
.hover-text-brand:hover { color: var(--rcc-red); }

/* Solid brand-red surfaces (buttons, chips, circles, bullets) */
.btn-brand { background-color: var(--rcc-red); }
.btn-brand:hover { background-color: var(--rcc-red-dark); }
.chip-brand { background-color: var(--rcc-red); }

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

/* Inline validation text */
.text-brand-error { color: var(--rcc-red-dark); }

/* Error / status alert box */
.alert-brand {
    background-color: rgba(226, 54, 112, 0.08);
    border-color: rgba(226, 54, 112, 0.25);
    color: var(--rcc-red-dark);
}

/* Inputs: focus ring + border, and the @error border state */
.input-brand:focus {
    border-color: var(--rcc-red);
    box-shadow: 0 0 0 2px rgba(226, 54, 112, 0.2);
}
.input-brand.is-invalid { border-color: var(--rcc-red); }

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

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

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