/* ============================================================================================ */
/* DESIGN TOKENS                                                                                 */
/*                                                                                               */
/* The single place colors, gutters, radii and shadows are defined. Load after bootstrap.css     */
/* (it remaps --bs-* variables) and before agency-platform.css.                                  */
/*                                                                                               */
/* Two layers:                                                                                   */
/*   1. PALETTE  (--app-color-*)  raw brand and gray-scale colors. Identical in every theme.     */
/*   2. ROLES    (--app-surface-*, --app-text-*, --app-border-*, --app-table-*, ...) what a     */
/*      color is FOR. Light values equal the colors the site has always used; the dark theme    */
/*      redefines only this layer.                                                              */
/*                                                                                               */
/* New and refactored CSS should reach for a ROLE token, never a hex value or a gray-N step,     */
/* for any background, text or border color. Then it is correct in both themes for free.        */
/*                                                                                               */
/* The theme is chosen by the data-theme attribute on <html> (see app/common/theme.js).          */
/* ============================================================================================ */

:root {
    /* PALETTE: BRAND ============================== */
    --app-color-primary: #218372;
    --app-color-primary-active: #206c5e;
    --app-color-primary-disabled: #498278;
    --app-color-primary-light: #34d1b6;
    --app-color-primary-opaque-1: #21837205;
    --app-color-primary-opaque-2: #21837215;
    --app-color-primary-opaque-3: #21837225;
    --app-color-primary-opaque-4: #21837235;
    --app-color-secondary: #7a6f6f;
    --app-color-secondary-active: #655c5c;
    --app-color-secondary-disabled: #474646;
    --app-color-secondary-opaque-1: #7a6f6f10;
    --app-color-secondary-opaque-2: #7a6f6f15;
    --app-color-secondary-opaque-3: #7a6f6f25;
    --app-color-secondary-opaque-4: #7a6f6f35;
    /* PALETTE: STATUS ============================= */
    --app-color-green: #5dba49;
    --app-color-green-active: #4ea342;
    --app-color-green-disabled: #95dc7e;
    --app-color-green-opaque-1: #5dba4908;
    --app-color-green-opaque-2: #5dba4915;
    --app-color-green-opaque-3: #5dba4925;
    --app-color-green-opaque-4: #5dba4935;
    --app-color-red: #e84345;
    --app-color-red-active: #c9363a;
    --app-color-red-disabled: #f89580;
    --app-color-red-opaque-1: #e8434508;
    --app-color-red-opaque-2: #e8434515;
    --app-color-red-opaque-3: #e8434525;
    --app-color-red-opaque-4: #e8434535;
    --app-color-orange: #e2972d;
    --app-color-orange-active: #d08329;
    --app-color-orange-disabled: #f6d471;
    --app-color-orange-opaque-1: #e2972d08;
    --app-color-orange-opaque-2: #e2972d15;
    --app-color-orange-opaque-3: #e2972d25;
    --app-color-orange-opaque-4: #e2972d35;
    --app-color-blue: #4a9fc9;
    --app-color-blue-active: #3282b3;
    --app-color-blue-disabled: #40cfeb;
    --app-color-blue-opaque-1: #4a9fc910;
    --app-color-blue-opaque-2: #4a9fc915;
    --app-color-blue-opaque-3: #4a9fc925;
    --app-color-blue-opaque-4: #4a9fc935;
    --app-color-purple: #8E56AE;
    --app-color-purple-active: #7a479a;
    --app-color-purple-disabled: #A18AD2;
    --app-color-purple-opaque-1: #8E56AE08;
    --app-color-purple-opaque-2: #8E56AE15;
    --app-color-purple-opaque-3: #8E56AE25;
    --app-color-purple-opaque-4: #8E56AE35;
    --app-color-teal: #34b7b0;
    --app-color-teal-active: #2b968b;
    --app-color-teal-disabled: #60d0ca;
    --app-color-teal-opaque-1: #34b7b008;
    --app-color-teal-opaque-2: #34b7b015;
    --app-color-teal-opaque-3: #34b7b025;
    --app-color-teal-opaque-4: #34b7b035;
    /* PALETTE: GRAYS (Bootstrap scale) ============ */
    --app-color-gray: #6c757d;
    --app-color-gray-1: #f8f9fa;
    --app-color-gray-2: #f1f3f5;
    --app-color-gray-3: #e9ecef;
    --app-color-gray-4: #dee2e6;
    --app-color-gray-5: #ced4da;
    --app-color-gray-6: #adb5bd;
    --app-color-gray-7: #6c757d;
    --app-color-gray-8: #495057;
    --app-color-gray-9: #343a40;
    --app-color-gray-10: #212529;
    --app-color-gray-opaque-1: #6c757d10;
    --app-color-gray-opaque-2: #6c757d15;
    --app-color-gray-opaque-3: #6c757d25;
    --app-color-gray-opaque-4: #6c757d35;
    --app-color-body-opaque-1: #17181905;
    --app-color-body-opaque-2: #17181915;
    --app-color-body-opaque-3: #17181925;
    --app-color-body-opaque-4: #17181935;
    /* BOOTSTRAP REMAP ============================= */
    --bs-green: var(--app-color-green);
    --bs-red: var(--app-color-red);
    --bs-orange: var(--app-color-orange);
    --bs-yellow: var(--app-color-yellow);
    --bs-blue: var(--app-color-blue);
    --bs-purple: var(--app-color-purple);
    --bs-teal: var(--app-color-teal);
    --bs-gray: var(--app-color-gray);
    --bs-gray-100: var(--app-color-gray-1);
    --bs-gray-200: var(--app-color-gray-2);
    --bs-gray-300: var(--app-color-gray-3);
    --bs-gray-400: var(--app-color-gray-4);
    --bs-gray-500: var(--app-color-gray-5);
    --bs-gray-600: var(--app-color-gray-6);
    --bs-gray-700: var(--app-color-gray-7);
    --bs-gray-800: var(--app-color-gray-8);
    --bs-gray-900: var(--app-color-gray-9);
    --bs-primary: var(--app-color-primary);
    --bs-secondary: var(--app-color-secondary);
    --bs-success: var(--app-color-green);
    --bs-info: var(--app-color-teal);
    --bs-warning: var(--app-color-orange);
    --bs-danger: var(--app-color-red);
    --bs-light: var(--app-color-gray-1);
    --bs-dark: var(--app-color-gray-9);

    /* ROLES: SURFACES (backgrounds) =============== */
    --app-bg: #ffffff;                                  /* page canvas behind content */
    --app-surface: #ffffff;                             /* panels, cards, modals, menus */
    --app-surface-1: var(--app-color-gray-1);           /* subtle fill: card/modal header, zebra */
    --app-surface-2: var(--app-color-gray-2);           /* panel heading, well, page header, read-only field */
    --app-surface-3: var(--app-color-gray-3);           /* stronger fill: grouped rows, chips */
    --app-surface-4: var(--app-color-gray-4);           /* input-group addon, hover on surface-2 */
    --app-surface-overlay: rgba(255, 255, 255, 0.75);   /* loading veils */
    --app-input-bg: #ffffff;
    --app-input-readonly-bg: var(--app-color-gray-2);
    --app-input-disabled-bg: var(--app-color-gray-3);
    /* ROLES: TEXT ================================= */
    --app-color-body: #171819;                          /* default body text */
    --app-text: var(--app-color-body);
    --app-text-strong: #000000;                         /* tables, maximum contrast */
    --app-text-heading: var(--app-color-gray-10);
    --app-text-emphasis: var(--app-color-gray-9);
    --app-text-secondary: var(--app-color-gray-8);
    --app-text-muted: var(--app-color-gray-7);
    --app-text-faint: var(--app-color-gray-6);
    --app-text-on-color: #ffffff;                       /* text on primary/status fills */
    --app-text-danger: var(--app-color-red-active);     /* warning text, e.g. inactive agents */
    --app-link: #0d6efd;
    --app-link-hover: #0a58ca;
    /* ROLES: BORDERS & SHADOWS ==================== */
    --app-border-subtle: var(--app-color-gray-3);
    --app-border: var(--app-color-gray-4);
    --app-border-strong: var(--app-color-gray-5);
    --app-border-input: var(--app-color-gray-6);
    --app-border-color-light: #adb5bd;                  /* panels, cards, wells */
    --app-border-color-dark: #495057;
    --app-shadow-color: rgba(0, 0, 0, 0.25);
    --app-drop-shadow-y: 0px 2px 6px 0px var(--app-color-gray-6);
    /* ROLES: TABLES =============================== */
    --app-table-bg: #ffffff;
    --app-table-text: #000000;
    --app-table-head-bg: var(--app-color-gray-6);
    --app-table-head-text: var(--app-color-gray-1);
    --app-table-striped-bg: var(--app-color-gray-opaque-2);
    --app-table-hover-bg: var(--app-color-gray-5);
    --app-table-border: rgba(0, 0, 0, 0.15);
    --app-table-cell-border: rgba(0, 0, 0, 0.25);
    /* ROLES: STATUS TINTS (alert/notice fills) ==== */
    --app-tint-info-bg: #e7f1ff;
    --app-tint-info-text: #084298;
    --app-tint-success-bg: #d1e7dd;
    --app-tint-success-text: #0f5132;
    --app-tint-warning-bg: #fff3cd;
    --app-tint-warning-text: #664d03;
    --app-tint-danger-bg: #f8d7da;
    --app-tint-danger-text: #842029;
    --app-notice-bg: rgba(255, 243, 205, 0.70);         /* commission notice banner */
    --app-notice-border: rgba(255, 236, 181, 1.0);

    /* GUTTERS ===================================== */
    --content-gutter: 1.25rem;
    --content-gutter-offset: calc(var(--content-gutter) * -1);
    --content-gutter-1: calc(var(--content-gutter) * 0.60);
    --content-gutter-1-offset: calc(var(--content-gutter-1) * -1);
    --content-gutter-2: calc(var(--content-gutter-1) * 0.60);
    --content-gutter-2-offset: calc(var(--content-gutter-2) * -1);
    --content-gutter-3: calc(var(--content-gutter-2) * 0.60);
    --content-gutter-3-offset: calc(var(--content-gutter-3) * -1);
    --content-gutter-double: calc(var(--content-gutter) * 2);
    --content-gutter-double-offset: calc(var(--content-gutter-double) * -1);
    --ui-gutter-y-xs: 0.250rem;
    --ui-gutter-x-xs: 0.500rem;
    --ui-gutter-y-sm: 0.313rem;
    --ui-gutter-x-sm: 0.625rem;
    --ui-gutter-y-md: 0.375rem;
    --ui-gutter-x-md: 0.750rem;
    --ui-gutter-y-lg: 0.438rem;
    --ui-gutter-x-lg: 0.875rem;
    --ui-gutter-y-xl: 0.500rem;
    --ui-gutter-x-xl: 1.00rem;
    /* RADII ======================================= */
    --app-border-radius-sm: 0.3rem;
    --app-border-radius-md: 0.6rem;
    --app-border-radius-round: 100px;                   /* EBS-1428: pills */
    /* TRANSITIONS ================================= */
    --app-transition-fast: 0.25s ease;
    --app-transition-slow: 0.5s ease;
}

/* ============================================================================================ */
/* DARK THEME: redefines the ROLE layer only.                                                    */
/* ============================================================================================ */
html[data-theme="dark"] {
    color-scheme: dark; /* native controls, date pickers and scrollbars follow */

    --app-bg: #15181c;
    --app-surface: #1e2227;
    --app-surface-1: #23282e;
    --app-surface-2: #292e35;
    --app-surface-3: #31373e;
    --app-surface-4: #3a4048;
    --app-surface-overlay: rgba(21, 24, 28, 0.75);
    --app-input-bg: #181b20;
    --app-input-readonly-bg: #22262c;
    --app-input-disabled-bg: #2a2f35;

    --app-color-body: #e3e6ea;
    --app-color-body-opaque-1: #e3e6ea05;
    --app-color-body-opaque-2: #e3e6ea15;
    --app-color-body-opaque-3: #e3e6ea25;
    --app-color-body-opaque-4: #e3e6ea35;
    --app-text-strong: #f1f3f5;
    --app-text-heading: #eef0f3;
    --app-text-emphasis: #e3e6ea;
    --app-text-secondary: #c3c9d0;
    --app-text-muted: #9aa3ad;
    --app-text-faint: #737c86;
    --app-link: #6ea8fe;
    --app-link-hover: #9ec5fe;
    --app-text-danger: #ff6b6b;

    --app-border-subtle: #2c3137;
    --app-border: #383e46;
    --app-border-strong: #434a53;
    --app-border-input: #4a525b;
    --app-border-color-light: #3b424a;
    --app-border-color-dark: #5c646e;
    --app-shadow-color: rgba(0, 0, 0, 0.6);
    --app-drop-shadow-y: 0px 2px 6px 0px rgba(0, 0, 0, 0.55);

    --app-table-bg: #1e2227;
    --app-table-text: #e3e6ea;
    --app-table-head-bg: #343a42;
    --app-table-head-text: #eef0f3;
    --app-table-striped-bg: rgba(255, 255, 255, 0.03);
    --app-table-hover-bg: #2f353c;
    --app-table-border: rgba(255, 255, 255, 0.10);
    --app-table-cell-border: rgba(255, 255, 255, 0.10);

    --app-tint-info-bg: #12304f;
    --app-tint-info-text: #9ec5fe;
    --app-tint-success-bg: #133a2a;
    --app-tint-success-text: #a3cfbb;
    --app-tint-warning-bg: #3d3214;
    --app-tint-warning-text: #ffda6a;
    --app-tint-danger-bg: #44191e;
    --app-tint-danger-text: #f1aeb5;
    --app-notice-bg: #3a3017;
    --app-notice-border: #6b5517;

    /* the gray-opaque tints are drawn on dark surfaces; lift them so they still read */
    --app-color-gray-opaque-1: #adb5bd10;
    --app-color-gray-opaque-2: #adb5bd15;
    --app-color-gray-opaque-3: #adb5bd25;
    --app-color-gray-opaque-4: #adb5bd35;
    --bs-light: #2b3036;
    --bs-dark: #e9ecef;
}