/* =============================================================================
   JES CRM · tokens.css — every design value. The only file with colour, size and
   font literals: changing the look of the system = editing this file.
   The names are the contract of foundation section 8.7 and of the vtiger-look
   wave (docs/vtiger-look/02-ui-contract.md §a.2); other CSS and the chart wrapper
   read them with var(). The light values are vtiger v7's (skins/vtiger/variables.less,
   todc-bootstrap, the measurements of docs/vtiger-look/live/NOTES.md); the dark
   theme overrides colours only. The five status colours are also the names stored
   in picklist_values.color (success, warning, danger, info, muted).
   The public forms and the login page keep the look they had before the wave:
   they read the --public-* values (public.css, the .login rules of layout.css).
   ============================================================================= */
:root {
  /* surfaces and text */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f9f9f9;
  --color-modulebar-bg: #fbfbfb;
  --color-border: #dddddd;
  --color-border-light: #eeeeee;
  --color-text: #333333;
  --color-text-strong: #222222;
  --color-text-muted: #6f6f6f;
  --color-field-label: #56626d;
  --color-title: #596875;

  /* actions */
  --color-primary: #4d90fe;
  --color-primary-border: #3079ed;
  --color-primary-text: #ffffff;
  --color-success-bg: #5cb85c;
  --color-success-border: #359947;
  --color-btn-bg: #f3f3f3;
  --color-btn-border: #dcdcdc;
  /* the buttons of the module bar ("+ Add Organization", "Customize ▾"): vtiger's .module-buttons.btn */
  --color-modulebar-btn-bg: #ffffff;
  --color-modulebar-btn-border: #dddddd;
  --color-modulebar-btn-text: #666666;
  --color-modulebar-btn-hover-bg: #f9f9f9;
  --color-modulebar-btn-hover-border: #cccccc;
  --color-user-photo-bg: #ffa500;
  --color-required: #ff0000;
  --color-link: #1155cc;
  --color-focus-ring: #4a90d9;
  --color-overlay: rgba(20, 28, 38, 0.45);

  /* status */
  --color-success: #1e7a4c;
  --color-warning: #9a5b00;
  --color-danger: #b3261e;
  --color-info: #1c6e8c;
  --color-muted: #6b7280;

  /* rows, badges, tabs, widgets, footer */
  --color-row-hover: #f5f5f5;
  --color-row-selected: #fff8dc;
  --color-surface-hover: #f7f7f7;
  --color-badge-bg: #eef1f5;
  --color-count-bg: #8e44ad;
  --color-count-text: #ffffff;
  --color-custom-module: #777777;
  --color-tab-active: #555555;
  --color-widget-border: #e2e2e4;
  --color-footer-bg: #eeeeee;

  /* the dark frame: ☰ square, drawer, icon rail */
  --color-rail: #2c3b49;
  --color-rail-hover: #596875;
  --color-rail-active: #010101;
  --color-rail-text: #ffffff;

  /* app accents (skins/<app>/variables.less); --color-app is chosen by body[data-app] in layout.css */
  --color-app-marketing: #ef5e29;
  --color-app-sales: #3cb878;
  --color-app-inventory: #f1c40f;
  --color-app-support: #6297c3;
  --color-app-project: #8e44ad;
  --color-app-tools: #2ecc71;
  --color-app-default: #56ccc8;
  --color-app-text: #ffffff;
  --color-app: var(--color-app-default);

  /* chart series */
  --chart-1: #2f6db3;
  --chart-2: #d9822b;
  --chart-3: #3c9d6b;
  --chart-4: #b8475a;
  --chart-5: #7a5bb5;
  --chart-6: #3fa0b5;

  /* type */
  --font-family: "Open Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-family-title: "Oswald", "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  /* the pinned links of the top bar: vtiger draws them bold with its Regular face only, so the browser makes the
     bold itself (lighter and narrower than the real Bold face); fonts.css declares "OpenSans-Regular" with 400 only */
  --font-family-nav: "OpenSans-Regular", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-weight-semibold: 600;
  --font-weight-btn: 400;
  --font-weight-nav: 700;
  --font-size-sm: 11px;
  --font-size-md: 12px;
  --font-size-btn: 13px;
  --font-size-lg: 15px;
  --font-size-block: 16px;
  --font-size-xl: 18px;
  --line-height: 1.4;

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* shape */
  --radius-sm: 2px;
  --radius-md: 3px;
  --shadow-1: 0 1px 2px rgba(20, 28, 38, 0.12);
  --shadow-2: 0 6px 24px rgba(20, 28, 38, 0.18);
  --shadow-dropdown: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-drawer: 0 5px 14px rgba(0, 0, 0, 0.5);

  /* layout */
  --shell-bar-height: 42px;
  --modulebar-height: 41px;
  --rail-width: 42px;
  --shell-menu-width: 230px;
  --list-sidebar-width: 240px;
  --content-max-width: none;
  --form-columns: 2;

  /* controls, records, blocks, lists */
  --control-height: 30px;
  --control-padding: 3px 8px;
  --btn-padding: 5px 12px;
  --modulebar-btn-padding: 6px 12px;
  --topbar-icon-font: 14px;
  --topbar-nav-icon-font: 20px;
  --mega-column-width: 217px;
  --record-icon-size: 80px;
  --record-icon-font: 35px;
  --rail-icon-font: 20px;
  --block-label-width: 40%;
  --list-cell-padding: 8px 3px;
  --list-head-padding: 10px 5px;

  /* the public forms and the login page: the look they had before the vtiger-look wave */
  --public-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei",
                        "Noto Sans CJK SC", sans-serif;
  --public-font-size-sm: 0.8125rem;
  --public-font-size-md: 0.9375rem;
  --public-font-size-lg: 1.0625rem;
  --public-font-size-xl: 1.375rem;
  --public-line-height: 1.5;
  --public-radius-sm: 4px;
  --public-radius-md: 8px;
  --color-public-bg: #f4f6f8;
  --color-public-surface: #ffffff;
  --color-public-surface-alt: #eef1f5;
  --color-public-border: #d5dae1;
  --color-public-text: #1f2933;
  --color-public-text-muted: #5b6776;
  --color-public-primary: #1f5c99;
  --color-public-link: #1a5490;
}

/* Colour overrides only. On paper the light values above always apply. */
@media screen {
  [data-theme="dark"] {
    --color-bg: #14181d;
    --color-surface: #1c2128;
    --color-surface-alt: #181d23;
    --color-modulebar-bg: #1f252c;
    --color-border: #38414d;
    --color-border-light: #2c343e;
    --color-text: #e3e8ee;
    --color-text-strong: #f0f3f6;
    --color-text-muted: #9aa6b4;
    --color-field-label: #9aa6b4;
    --color-title: #b5c0cc;

    --color-primary: #3b82c4;
    --color-primary-border: #2f6aa3;
    --color-primary-text: #ffffff;
    --color-success-bg: #3f8f4a;
    --color-success-border: #2e7a3a;
    --color-btn-bg: #2a323c;
    --color-btn-border: #44505d;
    --color-modulebar-btn-bg: #1c2128;
    --color-modulebar-btn-border: #38414d;
    --color-modulebar-btn-text: #b5c0cc;
    --color-modulebar-btn-hover-bg: #232a33;
    --color-modulebar-btn-hover-border: #44505d;
    --color-user-photo-bg: #b87a00;
    --color-required: #ff6b6b;
    --color-link: #7db4ea;
    --color-focus-ring: #7db4ea;
    --color-overlay: rgba(0, 0, 0, 0.6);

    --color-success: #58b98a;
    --color-warning: #e0a64a;
    --color-danger: #f0827a;
    --color-info: #62b5d1;
    --color-muted: #9aa3ad;

    --color-row-hover: #242c36;
    --color-row-selected: #3a3520;
    --color-surface-hover: #232a33;
    --color-badge-bg: #2a323c;
    --color-count-bg: #a66bc4;
    --color-count-text: #ffffff;
    --color-custom-module: #5d6670;
    --color-tab-active: #b5c0cc;
    --color-widget-border: #38414d;
    --color-footer-bg: #232a33;

    --color-rail: #10161c;
    --color-rail-hover: #2c3b49;
    --color-rail-active: #000000;
    --color-rail-text: #e3e8ee;

    --color-app-marketing: #ef5e29;
    --color-app-sales: #3cb878;
    --color-app-inventory: #d4ac0d;
    --color-app-support: #6297c3;
    --color-app-project: #a66bc4;
    --color-app-tools: #2ecc71;
    --color-app-default: #56ccc8;
    --color-app-text: #ffffff;

    --chart-1: #5b9bd8;
    --chart-2: #e6a35c;
    --chart-3: #63bd8d;
    --chart-4: #d9788a;
    --chart-5: #a48bd6;
    --chart-6: #6cc0d2;

    --color-public-bg: #14181d;
    --color-public-surface: #1c2128;
    --color-public-surface-alt: #232a33;
    --color-public-border: #38414d;
    --color-public-text: #e3e8ee;
    --color-public-text-muted: #9aa6b4;
    --color-public-primary: #3b82c4;
    --color-public-link: #7db4ea;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.6);
    --shadow-dropdown: 0 2px 4px rgba(0, 0, 0, 0.6);
    --shadow-drawer: 0 5px 14px rgba(0, 0, 0, 0.8);
  }
}

/* =============================================================================
   The clean look — a second look of the whole system beside vtiger's. The person switches it in the user menu
   (Look: Classic / Clean, js/ui/look.js); app.js then puts data-style="clean" on <html>. Calm greys, one accent,
   rounded shapes, larger controls and the system font. The classic values above stay the standard and are what
   every page shows without the attribute. css/clean.css changes the few shapes no token reaches (capitals, the
   right-aligned labels, square corners). Screen only: on paper the classic values apply.
   [data-style="clean"][data-theme="dark"] repeats every colour for the dark theme, because the clean block
   would otherwise win over the dark one (same weight, later in the file).
   ============================================================================= */
@media screen {
  [data-style="clean"] {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-surface-alt: #f9fafb;
    --color-modulebar-bg: #ffffff;
    --color-border: #e1e4e8;
    --color-border-light: #ebedf0;
    --color-text: #1f2329;
    --color-text-strong: #111418;
    --color-text-muted: #5f6673;
    --color-field-label: #5f6673;
    --color-title: #1f2329;

    --color-primary: #c2410c;
    --color-primary-border: #9a3412;
    --color-primary-text: #ffffff;
    --color-success-bg: #c2410c;
    --color-success-border: #9a3412;
    --color-btn-bg: #ffffff;
    --color-btn-border: #d5d9df;
    --color-modulebar-btn-bg: #ffffff;
    --color-modulebar-btn-border: #d5d9df;
    --color-modulebar-btn-text: #3f4552;
    --color-modulebar-btn-hover-bg: #f5f6f8;
    --color-modulebar-btn-hover-border: #c3c8cf;
    --color-user-photo-bg: #c2410c;
    --color-required: #b42318;
    --color-link: #b93e0b;
    --color-focus-ring: #c2410c;
    --color-overlay: rgba(17, 20, 24, 0.45);

    --color-success: #15803d;
    --color-warning: #a15c07;
    --color-danger: #b42318;
    --color-info: #1d6fa5;
    --color-muted: #6b7280;

    --color-row-hover: #f7f8fa;
    --color-row-selected: #fff4ec;
    --color-surface-hover: #f3f4f6;
    --color-badge-bg: #f0f1f4;
    --color-count-bg: #c2410c;
    --color-count-text: #ffffff;
    --color-custom-module: #6b7280;
    --color-tab-active: #c2410c;
    --color-widget-border: #e1e4e8;
    --color-footer-bg: #f9fafb;

    --color-rail: #1f2329;
    --color-rail-hover: #343a45;
    --color-rail-active: #c2410c;
    --color-rail-text: #ffffff;

    /* one accent instead of vtiger's colour per app */
    --color-app-marketing: #c2410c;
    --color-app-sales: #c2410c;
    --color-app-inventory: #c2410c;
    --color-app-support: #c2410c;
    --color-app-project: #c2410c;
    --color-app-tools: #c2410c;
    --color-app-default: #c2410c;
    --color-app-text: #ffffff;

    --font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei",
                   "Noto Sans CJK SC", sans-serif;
    --font-family-title: var(--font-family);
    --font-family-nav: var(--font-family);
    --font-weight-btn: 500;
    --font-weight-nav: 600;
    --font-size-sm: 12px;
    --font-size-md: 13px;
    --font-size-btn: 14px;
    --font-size-lg: 15px;
    --font-size-block: 16px;
    --font-size-xl: 22px;
    --line-height: 1.5;

    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 1px 2px rgba(17, 20, 24, 0.06);
    --shadow-2: 0 10px 30px rgba(17, 20, 24, 0.14);
    --shadow-dropdown: 0 8px 24px rgba(17, 20, 24, 0.12);

    --shell-bar-height: 52px;
    --modulebar-height: 52px;
    --rail-width: 56px;
    --control-height: 36px;
    --control-padding: 6px 10px;
    --btn-padding: 7px 14px;
    --modulebar-btn-padding: 7px 14px;
    --topbar-icon-font: 16px;
    --record-icon-size: 64px;
    --record-icon-font: 28px;
    --list-cell-padding: 12px 10px;
    --list-head-padding: 12px 10px;
  }

  [data-style="clean"][data-theme="dark"] {
    --color-bg: #121519;
    --color-surface: #1b1f25;
    --color-surface-alt: #171a1f;
    --color-modulebar-bg: #1b1f25;
    --color-border: #343b45;
    --color-border-light: #2a3038;
    --color-text: #e3e8ee;
    --color-text-strong: #f2f4f7;
    --color-text-muted: #9aa6b4;
    --color-field-label: #9aa6b4;
    --color-title: #e3e8ee;

    --color-primary: #c2410c;
    --color-primary-border: #9a3412;
    --color-primary-text: #ffffff;
    --color-success-bg: #c2410c;
    --color-success-border: #9a3412;
    --color-btn-bg: #232830;
    --color-btn-border: #3c444f;
    --color-modulebar-btn-bg: #1b1f25;
    --color-modulebar-btn-border: #3c444f;
    --color-modulebar-btn-text: #cfd6de;
    --color-modulebar-btn-hover-bg: #232830;
    --color-modulebar-btn-hover-border: #4a5360;
    --color-user-photo-bg: #c2410c;
    --color-required: #ff7b72;
    --color-link: #f2a477;
    --color-focus-ring: #f2a477;
    --color-overlay: rgba(0, 0, 0, 0.6);

    --color-success: #58b98a;
    --color-warning: #e0a64a;
    --color-danger: #f0827a;
    --color-info: #62b5d1;
    --color-muted: #9aa3ad;

    --color-row-hover: #222831;
    --color-row-selected: #3a2a20;
    --color-surface-hover: #232830;
    --color-badge-bg: #2a3038;
    --color-count-bg: #c2410c;
    --color-count-text: #ffffff;
    --color-custom-module: #5d6670;
    --color-tab-active: #f2a477;
    --color-widget-border: #343b45;
    --color-footer-bg: #171a1f;

    --color-rail: #0d1013;
    --color-rail-hover: #2a3038;
    --color-rail-active: #c2410c;
    --color-rail-text: #e3e8ee;

    --color-app-marketing: #c2410c;
    --color-app-sales: #c2410c;
    --color-app-inventory: #c2410c;
    --color-app-support: #c2410c;
    --color-app-project: #c2410c;
    --color-app-tools: #c2410c;
    --color-app-default: #c2410c;
    --color-app-text: #ffffff;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}