/* 
 * Campaign Style Overrides - Lloyds Bank
 */

/* Add Custom font imports here */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Variables */
:root {
    /* Body */
    --body-background: #ffffff;
    --body-color: #000;
    --body-font-family: 'Open Sans', sans-serif;

    /* Header */
    --header-background: #ffffff;
    --header-border-color: #eaf0f6;
    --header-border-width: 0 0 1px 0;

    /* Container */
    --container-padding: 0;
    --container-margin: 2rem auto;
    --container-width: 1200px;

    /* Separators */
    --separator-color: #f1f1f1;

    /* Panels */
    --panel-background: #fff;
    --panel-border-width: 1px;
    --panel-border-color: #f1f1f1;
    --panel-border-radius: 20px;
    --panel-separator-color: #f1f1f1;

    /* Images */
    --image-border-width: 0;
    --image-border-color: #f1f1f1;
    --image-border-radius: 10px;

    /* Titles */
    --title-primary-color: #006a4d;
    --title-primary-font-family: 'Open Sans', sans-serif;
    --title-primary-font-weight: 700;
    --title-secondary-color: #006a4d;
    --title-secondary-font-family: 'Open Sans', sans-serif;
    --title-secondary-font-weight: 500;

    /* Links */
    --link-color: #649c00;
    --link-hover-color: #006a4d;

    /* Buttons */
    --button-border-radius: 3px;
    --button-border-radius-md: 5px;
    --button-font-family: 'Open Sans', sans-serif;
    --button-background: transparent;
    --button-hover-background: #83b03330;
    --button-color: #649c00;
    --button-hover-color: #649c00;
    --button-border-width: 1px;
    --button-border-color: #649c00;
    --button-hover-border-color: #83b033;

    /* Yellow Button */
    --button-primary-background: #649c00;
    --button-primary-hover-background: #83b033;
    --button-primary-color: #fff;
    --button-primary-hover-color: #fff;
    --button-primary-border-width: 0;
    --button-primary-border-color: #649c00;
    --button-primary-hover-border-color: #83b033;

    /* Blue Button */
    --button-secondary-background: #d24702;
    --button-secondary-hover-background: #db6c35;
    --button-secondary-color: #fff;
    --button-secondary-hover-color: #fff;
    --button-secondary-border-width: 0;
    --button-secondary-border-color: #d24702;
    --button-secondary-hover-border-color: #db6c35;

    /* Outline Button */
    --button-outline-background: transparent;
    --button-outline-hover-background: #83b03330;
    --button-outline-color: #649c00;
    --button-outline-hover-color: #649c00;
    --button-outline-border-width: 1px;
    --button-outline-border-color: #649c00;
    --button-outline-hover-border-color: #83b033;

    /* Disabled Button */
    --button-disabled-background: #eaf0f6;
    --button-disabled-color: #b2cade;
    --button-disabled-border-width: 0 0 2px 0;
    --button-disabled-border-color: #6fbcf4;

    /* Forms */
    --form-label-color: #006a4d;
    --form-accent-color: #649c00;
    --form-border-color: #9abec3;
    --form-border-focus-color: #679da5;
    --form-placeholder-color: #d1dfec;

    /* Star Rating */
    --star-on-color: #add666;
    --star-off-color: #c1d799;
}