/*
 * Cookie banner theme (vanilla-cookieconsent v3) - "Blanc + vert".
 * Client-approved palette.
 *
 * Light palette built from the site's own SCSS variables
 * (resources/sass/utilities/_variables.scss): a white card with $green #21c389
 * as the primary action, $light-gray #eff1f1 for rules, $body-bg #f8fafc for
 * the blocks inside the preferences modal, and Raleway as the face. Replaces
 * the earlier dark/neon treatment after client feedback asking for brand
 * colours instead of black and yellow.
 *
 * envolee-frontend carries its own approved palette ("Bleu pâle doux + rose")
 * at app/assets/style.css. The two sites deliberately differ in colour, but the
 * token NAMES and the shape values (8px / 4px radii) are identical on both
 * sides - keep them that way, so a change to the banner's structure stays a
 * one-line edit in both repos.
 *
 * Setting the variables on #cc-main overrides both the library's light
 * defaults and its .cc--darkmode block, so the look never depends on that
 * class. The library's own card shadow is already
 * 0 .625em 1.875em rgba(0,0,2,.3), and it does real work here: a white card on
 * the #f8fafc page ground is separated by the shadow, not by its border.
 *
 * Ratios below are measured against the surface each colour sits on. Several
 * tones are darker than the first mockup, which used values that did not meet
 * the thresholds: muted text (4.15:1), the "Tout refuser" outline (1.29:1),
 * the green button's edge (2.27:1) and the link (4.05:1). The off-state toggle
 * was the worst of them - a white knob on a #dfe3e3 track is 1.29:1, so the
 * switch position was effectively invisible; it is now a mid-grey track with a
 * white knob, which reads both against the card and against the knob.
 */

#cc-main {
    /* --- Surfaces and text --- */
    --cc-bg: #ffffff;
    --cc-primary-color: #4a4a4a;          /* 8.86:1 on the card */
    --cc-secondary-color: #6b7373;        /* 4.86:1 on the card */

    /* --- Primary buttons (Accept all / Save) --- */
    --cc-btn-primary-bg: #21c389;         /* $green */
    --cc-btn-primary-color: #00301f;      /* 6.40:1 on the green */
    --cc-btn-primary-border-color: #17996b; /* 3.62:1 on the card, so the edge reads */
    --cc-btn-primary-hover-bg: #1aa876;
    --cc-btn-primary-hover-color: #00301f; /* 4.79:1 on the hover green */
    --cc-btn-primary-hover-border-color: #17996b;

    /* --- Secondary buttons (Reject all / Manage) --- */
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: #4a4a4a;    /* 8.86:1 on the card */
    --cc-btn-secondary-border-color: #8a9393; /* 3.15:1 on the card */
    --cc-btn-secondary-hover-bg: rgba(33, 195, 137, 0.08);
    --cc-btn-secondary-hover-color: #4a4a4a;
    --cc-btn-secondary-hover-border-color: #6b7373;

    /* --- Dividers (decorative rules, not control boundaries) --- */
    --cc-separator-border-color: #eff1f1;  /* $light-gray */
    --cc-section-category-border: #eff1f1;

    /* --- Toggles: brand green when on, mid-grey track when off --- */
    --cc-toggle-on-bg: #21c389;
    --cc-toggle-on-knob-bg: #00301f;      /* 6.40:1 on the green track */
    --cc-toggle-off-bg: #8a9393;          /* 3.15:1 on the card */
    --cc-toggle-off-knob-bg: #ffffff;     /* 3.15:1 on its track */
    --cc-toggle-enabled-icon-color: #00301f;
    --cc-toggle-disabled-icon-color: #8a9393;

    /* Read-only toggle: the "strictly necessary" row, visibly locked */
    --cc-toggle-readonly-bg: #dfe3e3;
    --cc-toggle-readonly-knob-bg: #a8b0b0;
    --cc-toggle-readonly-knob-icon-color: #dfe3e3;

    /* --- Category blocks in the preferences modal --- */
    --cc-cookie-category-block-bg: #f8fafc; /* $body-bg */
    --cc-cookie-category-block-border: #dfe3e3;
    --cc-cookie-category-block-hover-bg: #f2f5f8;
    --cc-cookie-category-block-hover-border: #cfd5d5;
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: #f2f5f8;

    /* --- Chrome --- */
    /* Overlay tinted slate rather than pure black: behind a white card, a
       neutral black scrim reads as muddy. */
    --cc-overlay-bg: rgba(38, 50, 56, 0.55);
    --cc-webkit-scrollbar-bg: #eff1f1;
    --cc-webkit-scrollbar-hover-bg: #bcc2c2;
    --cc-link-color: #1b7d59;             /* 5.09:1 on the card */

    --cc-footer-bg: #f8fafc;
    --cc-footer-color: #6b7373;
    --cc-footer-border-color: #eff1f1;

    /* --- Shape and type --- */
    --cc-font-family: 'Raleway', sans-serif;
    --cc-modal-border-radius: 8px;
    --cc-btn-border-radius: 4px;

    /* Clears the Zoho SalesIQ launcher. */
    --cc-z-index: 2147483645;

    color-scheme: light;
}

/* A white card on the #f8fafc page ground has almost no luminance difference
   to lean on, so the shadow does the separating and this edge only defines it. */
#cc-main .cm,
#cc-main .pm {
    border: 1px solid #dfe3e3;
}

/* The brand green is only 2.27:1 against a white card, too faint for a focus
   ring; the darker green clears the 3:1 the indicator needs. */
#cc-main button:focus-visible,
#cc-main [role='button']:focus-visible {
    outline: 2px solid #17996b;
    outline-offset: 2px;
}