/* Site styles for this child theme.
   Loaded after the parent CSS, so selectors here win without extra specificity. */


/* Krystal Klean brand tokens. Parent CSS loads first, so these win. */

:root {
    --lp-brand: #FCDC00;         /* yellow */
    --lp-on-brand: #000000;      /* yellow needs dark text, not white */

    /* Brand yellow is illegible as text on light backgrounds - eyebrows and
       feature icons use this darker variant instead */
    --lp-brand-ink: #C1A603;
    --lp-brand-tint: #FFFCF0;    /* pale wash behind feature icons */

    --lp-text: #0F172A;          /* Headings and Text */
    --lp-muted: #475569;         /* body copy */

    --lp-placeholder: #94A3B8;
    --lp-select-ink: #475569;
    --lp-header-h: 72px;
    --lp-hairline: rgba(0, 0, 0, .08);
    --lp-card-border: #CBD5E1;

     /* Hero form card top bar */
    --lp-hero-card-accent: #c1a603;

    /* Hero checklist bubbles */
    --lp-hero-check-bg: rgba(255, 255, 255, .16);
    --lp-hero-check-ink: var(--lp-brand);

    --lp-brand-hover: #e3c600;   /* --lp-brand darkened 10%, same hue */

    --lp-card-shadow: #0F172A0A;

    --lp-faq-line: #0000001A;
    --lp-footer-bg: #141414;
}

/* The parent's brand background assumes white text - yellow doesn't */
.lp-bg-brand { color: var(--lp-on-brand); }

/* Figma's light section is warm cream, not the parent's neutral grey */
.lp-bg-light { background-color: #FFFCF0; }

/* Figma has the whole headline in brand yellow, not just the accent line */
.lp-block--hero .lp-hero__title-main { color: var(--lp-brand); }

/* This section's yellow differs from --lp-brand (#FCDC00) - confirm in Figma */
.lp-block--process.lp-bg-brand { background-color: #FEE102; }

/* Design uses pure black on yellow, and for the dark button */
.lp-btn--secondary { background: #000; }