:root {
    --main-brand-container-width: 1170px;

    /* ========================================
       Fonts
       CAI Brand Guidelines:
       Primary / secondary digital font: Roboto
       (Myriad Pro is the approved fallback per brand guide p.14)
       ======================================== */
    --main-brand-font: "Roboto", "Myriad Pro", sans-serif;
    --main-brand-heading-font: "Roboto", "Myriad Pro", sans-serif;
    --main-brand-font-size: 16px;


    /* ========================================
       Brand Colours
       ======================================== */
    --main-brand-color: #183650;              /* CAI Navy — logo, headings */
    --main-brand-secondary-color: #08c;        /* CAI Cyan — links, accents */
    --main-brand-body-color: #616161;          /* CAI Grey (matches p.9 swatch) */
    --main-brand-body-bg-color: #FFFFFF;

    /* Icons */
    --main-brand-icons-color: #183650;


    /* ========================================
       Base
       ======================================== */
    --main-brand-card-border: 1px solid #D9D9D9;
    --main-brand-card-bg-color: #FFFFFF;
    --main-brand-card-border-radius: 0px;      /* brand guide favors sharp/geometric edges */
    --main-brand-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    --main-brand-card-hover-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);


    /* ========================================
       Page Banner
       ======================================== */
    --main-brand-tabs-banner-heading-color: #FFFFFF;
    --main-brand-page-banner-heading-font-size: 36px;


    /* ========================================
       Sections / Cards
       ======================================== */
    --main-brand-tabs-sections-heading-color: #183650;


    /* ========================================
       Buttons
       Brand rule (p.8): never distort, always ensure contrast
       ======================================== */
    --main-brand-button-border-radius: 4px;
    --main-brand-button-padding: 10px 18px;
    --main-brand-button-font-weight: 700;

    /* Primary */
    --main-brand-primary-button-bg: #183650;
    --main-brand-primary-border-color: 1px solid #183650;
    --main-brand-primary-button-color: #FFFFFF;
    --main-brand-primary-button-shadow: none;
    --main-brand-primary-button-hover-bg: #FFFFFF;
    --main-brand-primary-border-hover-color: 1px solid #183650;
    --main-brand-primary-button-hover-color: #183650;
    --main-brand-primary-button-hover-shadow: none;

    /* Secondary */
    --main-brand-secondary-button-bg: #FFFFFF;
    --main-brand-secondary-border-color: 1px solid #183650;
    --main-brand-secondary-button-color: #183650;
    --main-brand-secondary-button-shadow: none;
    --main-brand-secondary-button-hover-bg: #183650;
    --main-brand-secondary-border-hover-color: 1px solid #183650;
    --main-brand-secondary-button-hover-color: #FFFFFF;
    --main-brand-secondary-button-hover-shadow: none;

    /* Portal */
    --main-brand-portal-button-bg: transparent;
    --main-brand-portal-border-color: 2px solid #08c;
    --main-brand-portal-button-color: #08c;
    --main-brand-portal-button-shadow: none;
    --main-brand-portal-button-hover-bg: #183650;
    --main-brand-portal-border-hover-color: 2px solid #183650;
    --main-brand-portal-button-hover-color: #FFFFFF;
    --main-brand-portal-button-hover-shadow: none;


    /* ========================================
       Radius
       ======================================== */
    --main-brand-border-radius: 4px;
    --main-brand-sm-border-radius: 4px;
    --main-brand-input-border-radius: 4px;
    --main-brand-border-color: #D9D9D9;
    --main-brand-web-form-sec-border-radius: 0px;
    --main-brand-listCard-border-radius: 0px;


    /* ========================================
       Inputs / Forms
       ======================================== */
    --main-brand-input-label-font-weight: 400;   /* p.15: headers bold/semi-bold */
    --main-brand-input-border-color: 1px solid #D9D9D9;
    --main-brand-input-padding: 10px 14px;
    --main-brand-input-label-color: #183650;     /* matches heading navy */
    --main-brand-input-bg-color: #FFFFFF;
    --main-brand-readOnly-input-bg-color: #F5F5F5;
    --main-brand-readOnly-input-border: 1px solid #D9D9D9;
    --main-brand-file-upload-border-color: 2px dashed #D9D9D9;
    --main-brand-input-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);


    /* ========================================
       Hero
       ======================================== */
    --main-brand-hero-bg: #183650;
    --main-brand-hero-color: #FFFFFF;


    /* ========================================
       Web Forms
       ======================================== */
    --main-brand-web-form-sec-bg-color: #FFFFFF;
    --main-brand-web-form-sec-border: 1px solid #D9D9D9;
    --main-brand-web-form-header-bg-color: #183650;
    --main-brand-web-form-header-color: #FFFFFF;
    --main-brand-web-form-header-border-radius: 0px;

    /* CAI Orange accent (badge highlight) */
    --main-brand-web-form-badge-bg-color: #ff9905;   /* switched to brand orange per p.9 swatch */
    --main-brand-web-form-badge-color: #FFFFFF;


    /* ========================================
       Tables
       ======================================== */
    --main-brand-table-header: #F2F2F2;
    --main-brand-table-header-bg: #F2F2F2;
    --main-brand-table-header-color: #183650;


    /* ========================================
       Notifications
       ======================================== */
    --main-brand-notification-bg-color: #F5F5F5;
    --main-brand-notification-border-color: 1px solid #D9D9D9;
    --main-brand-notification-color: #616161;


    /* ========================================
       Side Menu
       ======================================== */
    --main-brand-side-menu-bg-color: #FFFFFF;
    --main-brand-sidemenu-border-radius: 0px;
    --main-brand-sidemenu-padding: 8px 0px;
    --main-brand-sidemenu-color: #183650;
	--main-brand-sidemenu-font-weight:400;
    --main-brand-sidemenu-hover-bg-color: #F2F6FF;
    --main-brand-sidemenu-active-bg-color: #F2F6FF;
    --main-brand-sidemenu-active-color: #183650;
    --main-brand-sidemenu-active-border-width: 0px 0px 2px 0px;
    --main-brand-sidemenu-active-border-color: solid #08c;
    --main-brand-sidemenu-active-font-weight: 600;
    --main-brand-sidemenu-active-shadow: none;


    /* ========================================
       Links
       ======================================== */
    --main-brand-dashboard-link-color: #183650;
    --main-brand-dashboard-link-hover-color: #08c;
    --main-brand-portal-link-color: #08c;
    --main-brand-portal-link-hover-color: #08c;
    --main-brand-primary-link-color: #183650;
    --main-brand-primary-link-hover-color: #616161;
    --main-brand-secondary-link-color: #183650;
    --main-brand-secondary-link-hover-color: #08c;


    /* ========================================
       Divider
       Brand guide consistently pairs navy diagonal
       with an ORANGE diagonal (letterhead p.19,
       compliment slip p.19, poster/pull-up p.22,
       back cover). Changed from cyan to orange
       to match this recurring motif — verify with
       CAI/Artefact before shipping.
       ======================================== */
    --main-brand-half-divider-bg-color: #ff9905;


    /* ========================================
       Dashboard / Banner
       ======================================== */
    --main-brand-dashboard-hero-banner-bg: #183650;
    --main-brand-dashboard-hero-banner-color: #FFFFFF;
    --main-brand-dashboard-hero-banner-padding: 0;
    --main-brand-dashboard-hero-banner-border-radius: 0px;
    --main-brand-dashboard-hero-banner-font-weight: 700;
    --main-brand-dashboard-hero-banner-font-size: 30px;
    --main-brand-dashboard-hero-bg: #183650;
    --main-brand-dashboard-hero-color: #FFFFFF;
    --main-brand-dashboard-hero-padding: 1rem;
    --main-brand-dashboard-hero-border-radius: 0px;
    --main-brand-dashboard-hero-font-weight: 700;
    --main-brand-dashboard-hero-font-size: 22px;
    --main-brand-dashboard-hero-card-bg: rgba(255, 255, 255, 0.96);


    /* ========================================
       Payment
       ======================================== */
    --main-brand-payment-summary-card-bg: #F5F5F5;
    --main-brand-payment-summary-right-card-head-bg:
        linear-gradient(140deg, #EEF3FF, #FFF3DF);
    --main-brand-payment-summary-card-border: 1px solid #D9D9D9;
    --main-brand-payment-summary-selected-card-shadow:
        0 0 0 1px rgba(3, 69, 255, 0.24),
        0 12px 24px rgba(3, 69, 255, 0.12);


    /* ========================================
       Directory
       ======================================== */
    --main-brand-directory-hero-content-bg: rgba(3, 69, 255, 0.72);
    --main-brand-directory-hero-content-Heading-color: #FFFFFF;
    --main-brand-directory-hero-content-subtext-color: #FFFFFF;
    --main-brand-directory-badge1-bg: #FFF0D9;
    --main-brand-directory-badge1-color: #183650;
    --main-brand-directory-badge2-bg: #183650;
    --main-brand-directory-badge2-color: #FFFFFF;


    /* ========================================
       List Cards
       ======================================== */
    --main-brand-listCard-bg-color: #FFFFFF;
    --main-brand-listCard-border: #D9D9D9;


    /* ========================================
       Delete Dialog
       ======================================== */
    --main-brand-delete-dialog-model-header-bg: #183650;
    --main-brand-delete-dialog-model-header-color: #FFFFFF;


    /* ========================================
       Event / Grid
       ======================================== */
    --main-brand-event-view-bg-color: #F2F2F2;
    --main-brand-grid-img-border-radius: 0px;
    --main-brand-grid-img-label: 0px 0px 12px 0px;


    /* ========================================
       Collapse Icon
       ======================================== */
    --main-brand-collapse-icon-bg-color: #FFFFFF;
    --main-brand-collapse-icon-color: #183650;
    --main-brand-collapse-icon-border-radius: 0;
    --main-brand-collapse-icon-padding: 5px;
    --main-brand-collapse-icon-hover-bg-color: #F2F6FF;
    --main-brand-collapse-icon-hover-color: #183650;
    --main-brand-collapse-icon-hover-border-radius: 4px;
    --main-brand-collapse-icon-hover-padding: 5px;


    /* ========================================
       Toggle
       ======================================== */
    --main-brand-toggle-icon-bg-color: #08c;
    --main-brand-toggle-icon-color: #FFFFFF;
    --main-brand-toggle-icon-shadow: 0;
    --main-brand-toggle-icon-hover-shadow:
        0 14px 28px rgba(0, 0, 0, 0.15);


    /* ========================================
       Sections
       ======================================== */
    --main-brand-card-preview-intro-color: #183650;
    --main-brand-card-preview-intro-font-weight: 600;
    --main-brand-section-heading-font-weight: 700;
    --main-brand-section-heading-font-size: 28px;
    --main-brand-section-heading-font: var(--main-brand-heading-font);


    /* ========================================
       Section Actions Tray
       ======================================== */
    --main-brand-section-action-tray-padding: 16px 18px;
    --main-brand-section-action-tray-margin-top: 20px;
    --main-brand-section-action-tray-border: 1px solid #D9D9D9;
    --main-brand-section-action-tray-border-radius: var(--main-brand-card-border-radius);
    --main-brand-section-action-tray-bg: transparent;
    --main-brand-section-action-tray-shadow: none;


    /* ========================================
       Login / Social
       ======================================== */
    --main-brand-login-card-glow-right-top: rgba(3, 69, 255, 0.10);
    --main-brand-login-card-glow-bottom-left: rgba(255, 153, 5, 0.10);
    --main-brand-social-login-card-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 12px 24px rgba(0, 0, 0, 0.05);
    --main-brand-social-login-card-hover-border-color: #183650;
    --main-brand-social-login-card-hover-shadow:
        0 18px 34px rgba(3, 69, 255, 0.13);
    --main-brand-social-auth-card-bg-gradient:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(3, 69, 255, 0.10) 100%
        );


    /* ========================================
       Thanks SVG
       ======================================== */
    --main-brand-thanks-svg-could-bg: #08c;
    --main-brand-thanks-svg-plane-mid-cloud-bg: #FFF0D9;
    --main-brand-thanks-svg-plane-outline: #183650;
    --main-brand-thanks-svg-plane-triangle-outlined-solid: #183650;
    --main-brand-thanks-svg-plane-triangle-dark: #616161;
}