/* ========== Customisable Root Variables ========== */
:root {
    /* === BRAND COLORS === */
    --primary-color: #FF532F; /* Primary Brand Colour */
    --secondary-color: #00202E; /* Secondary Brand Colour */
    --secondary-color-rgb: 0, 32, 46;
    --secondary-color-20pct: rgba(0, 32, 46, 0.2);

    /* === PRIMARY BUTTONS ON DARK BG === */
    --button-primary-bg-on-dark: #F47F57;
    --button-primary-hover-bg-on-dark: #FFFFFF;
    --button-primary-text-on-dark: #FFFFFF;
    --button-primary-hover-text-on-dark: #FF532F;

    /* === PRIMARY BUTTONS ON LIGHT BG === */
    --button-primary-bg-on-light: #FF532F;
    --button-primary-hover-bg-on-light: #00202E;
    --button-primary-text-on-light: #FFFFFF;

    /* === SECONDARY BUTTONS ON LIGHT BG === */
    --button-secondary-bg-on-light: #00202E;
    --button-secondary-hover-bg-on-light: #14323F;
    --button-secondary-text-on-light: #FFFFFF;

    /* === TEXT ON LIGHT BG === */
    --primary-text-color: #00202E; /* Default Main Text Colour */
    --secondary-text-color: #FF532F; /* Default Secondary Text Colour */
    --tertiary-text-color: #9FA3A9; /* Default Secondary Text Colour */
    --subheader-text-color: #101828;
    --subheader-description-text-color: #475467;

    /* === TEXT ON DARK BG === */
    --text-on-dark-background: #FFFFFF; /* Default White text on dark background Colour */

   /* === LINKS === */
    --navigation-link-color: #FFFFFF; /* Default Nav colour */
    --navigation-link-hover-color: #FF532F; /* Default Nav colour */
    --link-color: #FF532F; /* Default Link Colour */
    --link-hover-color: #FFFFFF; /* Default Link Hover/Active Color */
    --utility-link-color-dark-bg: #FFFFFF;
    --utility-link-hover-color-dark-bg:#FF532F; 
    
    /* === TABLES === */
    --table-header-color: #00202E; /* Default header colour */
    --table-row-color: #FCFCFD; /* Default row colour */
    --table-header-cell-border: #ffffff1a;
    --table-row-cell-border: #ffffff1a;
    --table-cell-light-border: #EAECF0;
    --table-collapse-icon: #98A2B3;

    /* === MODALS === */
    --modal-bg-color: #FFFFFF;
    --modal-active-tab-bg-color: #00202E; /* Default tab bgcolour */
    --modal-active-tab-text-color: #FFFFFF; /* Default row colour */
    --modal-tab-row-header: #00202E;
    --modal-tab-row-content:#FCFCFD;
    --modal-tab-row-content-text-color: #475467;

    /* === PRICING TABLE/SUBSCRIPTION === */
    --pricing-lite-bg-color: #FFFFFF;
    --pricing-pro-bg-color: var(--secondary-color); /* currently secondary brand color */
    --pricing-header-text-color: #FFFFFF;
    --pricing-border-color: #EAECF0;
    --pricing-feature-text-color: var(--primary-text-color);
    --pricing-description-text-color: #475467;
    --pricing-price-text-color: var(--secondary-color);
    --pricing-frequency-text-color: var(--secondary-text-color);
    --pricing-footer-bg-color: #FFFFFF;
    --pricing-secondary-text-color: #888888;
    --subscription-header-text-color:#344054;
    --subscription-description-text-color:#475467;
    --subscription-summary-text-color:#475467;
    --subscription-line-border-color:#cccccc;
    --subscription-features-text-color:var(--primary-text-color);
    --subscription-signup-button-bg-color: var(--secondary-color);
    --subscription-signup-button-text-color: #FFFFFF;
    --subscription-signup-button-hover-bg-color:#14323F;
    --subscription-signup-button-text-hover-color: var(--subscription-signup-button-text-color);

   /* === TOOLTIPS?? === */

    --error-text-color: red; /* Default error messages */

  /* === GENERAL? === */
   --section-background-color: #061921;
   --text-on-primary-background: #FFFFFF;
   --text-on-secondary-background: #FFFFFF;
}
