/* =================================================================
      NOTES:
      Update colours in www/backend/email/templates to match below
================================================================= */

:root {
    /* ==============================================================
       CLIICKS BRAND COLOURS AND FONTS
       ============================================================== */

    --brand-primary: #1D3A89;
    --brand-secondary: #2461E9;
    --brand-logo: #5FA4F9;

    --brand-primary-dark: #14285F;
    --brand-primary-hover: #172F70;

    --brand-secondary-dark: #1B4FC4;
    --brand-secondary-hover: #1F55CC;

    --default-font: "Inter", sans-serif;
    --heading-font: "Inter",  sans-serif;
    --nav-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;


    /* ==============================================================
       TRANSPARENT BRAND VARIATIONS
       Use these for tabs, soft panels, selected rows and borders.
       ============================================================== */

    --primary-05: rgba(29, 58, 137, 0.05);
    --primary-08: rgba(29, 58, 137, 0.08);
    --primary-10: rgba(29, 58, 137, 0.10);
    --primary-12: rgba(29, 58, 137, 0.12);
    --primary-15: rgba(29, 58, 137, 0.15);
    --primary-20: rgba(29, 58, 137, 0.20);
    --primary-70: rgba(29, 58, 137, 0.70);

    --secondary-08: rgba(36, 97, 233, 0.08);
    --secondary-12: rgba(36, 97, 233, 0.12);
    --secondary-20: rgba(36, 97, 233, 0.20);


    /* ==============================================================
       PAGE, SURFACE AND TEXT COLOURS
       ============================================================== */

    --page-background: #f6f6f6;
    --page-dark-background: #e6e6e6;
    --surface-background: #FFFFFF;
    --surface-background-soft: #F9FAFD;
    --surface-border: #ccc;
    --button-border-on-primary: rgba(255, 255, 255, .45);

    --text-primary: #1B2438;
    --text-secondary: #64708A;
    --text-white: #ffffff;
    --text-black: #000000;
    --text-dark: #595959;
    --text-muted: #8993A8;
    --text-on-primary: #FFFFFF;

    --greeting-color: #FFFFFF;
    --subscription-cancel:#ff8080;


    /* ==============================================================
       COMMON UI COLOURS
       ============================================================== */

    --border-color: rgba(29, 58, 137, 0.12);
    --border-color-light: rgba(29, 58, 137, 0.08);
    --border-color-black: #000000;
    --border-color-gray: #e6e6e6;
    --border-color-dark-gray: #dee2e6;

    --tabs-background-color: var(--primary-08);
    --tabs-background-color-dark: #d9d9d9;
    --tabs-background-color-light: #f7f7f7;
    --selected-background-color: var(--secondary-12);

    --nav-back-color-dark: var(--brand-primary);
    --nav-back-color-light: var(--primary-08);

    --card-shadow: 0 10px 28px rgba(36, 48, 88, .18);
    --card-shadow-hover: 0 14px 34px rgba(29, 58, 137, 0.20);

    --shadow-box: 0 14px 34px rgba(29, 58, 137, 0.20);
    --shadow-box-xl: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
    --shadow-box-lg: 0 18px 45px rgba(36, 48, 88, .18);
    --shadow-box-md: 0 6px 16px rgba(0, 0, 0, 0.05);
    --shadow-box-sm: 0 0.5rem 1rem rgba(0,0,0,.15);
    --shadow-offcanvas-header: 0 6px 12px rgba(34, 46, 80, .18);
    --shadow-search: 0 1px 0 rgba(16,24,40,0.02), 0 6px 18px rgba(11,15,30,0.04);
    --shadow-help: -3px 0 12px rgba(0, 0, 0, 0.3);
    --shadow-calendar: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    --shadow-pulse-0: 0 0 0 0 rgba(255,77,77,0.7);
    --shadow-pulse-50: 0 0 15px 10px rgba(255,77,77,0);
    --shadow-pulse-100: 0 0 0 0 rgba(255,77,77,0);
    --shadow-service-item: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
    --shadow-team-member: 0px 2px 15px rgba(0, 0, 0, 0.1);
    --shadow-testimonial-item: 0px 2px 12px rgba(0, 0, 0, 0.1);
    --shadow-contact: 0px 2px 15px rgba(0, 0, 0, 0.1);

    --nav-back-color-dark: var(--brand-primary);
    --nav-back-color-light: var(--brand-secondary);
    --nav-color: #ffffff;
    --nav-hover-color: #0442c8;
    --nav-mobile-background-color: #f5f5f5; 
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #444444;
    --nav-dropdown-hover-color: #888888;
    --nav-dropdown-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    
    --dash-bg: var(--page-background);
    --dash-card: var(--surface-background);
    --dash-ink: var(--text-primary);
    --dash-muted: var(--text-secondary);
    --dash-border: var(--border-color);
    --dash-accent: var(--brand-primary);
    --dash-soft: var(--border-color-light);
    --dash-shadow: 0 8px 24px rgba(34, 46, 80, .06);
    --dash-link-shadow: 0 8px 20px rgba(34, 46, 80, .08);
  
    scroll-behavior: smooth;

    /* ==============================================================
       STATUS COLOURS
       Keep these distinct from the brand colours for clarity.
       ============================================================== */

    --primary-color: var(--brand-primary);
    --primary-background:rgba(29, 58, 137, 0.10);
    --primary-border-color: var(--brand-secondary);

    --success-color: #178347;
    --success-background: #d4f7e4;
    --success-border-color: #0f572f;

    --warning-color: #B56A00;
    --warning-background: #fff3cd;
    --warning-border-color: #804a00;

    --danger-color: #C53838;
    --danger-background: #f8d7da;
    --danger-border-color: #9f2d2d;

    --info-color: #0dcaf0;
    --info-background: #cff4fc;
    --info-boder-color: #0aa3c2;

    --secondary-color: #2461E9;
    --secondary-background: rgba(36, 97, 233, 0.10);

    --dark-color: #212529;
    --dark-background: rgba(33, 37, 41, 0.10);

    --light-color: #f8f9fa;
    --light-background: #6a8095;
    --light-background-soft: #f2f2f2;

    --icon-color-baker: #fd7e14;
    --icon-color-gray: #6c757d;
    --icon-color-purple: #6f42c1;
    --icon-color-orange: #fd7e14;
    --icon-color-yellow:#ffc107;


    --shift-drag: #d3d3d3;
    --shift-background: #f2f2f2;
    --shift-page-background: #f8f9fa;
    --shift-today-background: #ffffe6;
    --shift-unavailable-text: #bfbfbf;
    --shift-unavailable-image: #333333;
    --shift-block-out-text: #476b6b;
    --shift-pub-holiday-background: #f8eded;
    --shift-pub-holiday-text: #ff0000;
    --shift-note-background: #ffffe6;
    --shift-my-note-background: #fff3cd;
    --shift-my-note-border: #ffcf33;
    --shift-my-note-text: #806200;
    --shift-schedule-border: #dddddd;
    --shift-td-mon-border: #888888;
    --shift-shadow: 0 7px 15px rgba(36, 48, 88, 0.08);

}