:root {
  --os-gray-100: light-dark(#f8f9fa, #1c1c20);
  --os-gray-200: light-dark(#e7ebed, #25262b); /* GRAY_200 */
  --os-gray-300: light-dark(#dee2e6, #3a3b41); /* GRAY_300 */
  --os-gray-400: light-dark(#ced4da, #56575e);
  --os-gray-500: light-dark(#adb5bd, #6e6f77);
  --os-gray-600: light-dark(#6c757d, #88898f);
  --os-gray-700: light-dark(#495057, #b3b4b8);
  --os-gray-800: light-dark(#343a40, #d1d1d3);
  --os-gray-900: light-dark(#212529, #e4e4e5); /* GRAY_900 */

  --os-white: light-dark(#ffffff, #000000);
  --os-black: light-dark(#000000, #ffffff);
  --os-white-bg: light-dark(#ffffff, var(--os-gray-200));
  --os-popover-bg: light-dark(#ffffff, var(--os-gray-200));

  --os-canvas-background-color: var(--os-white-bg);

  --os-default-font: "Roboto", "Arial", "Liberation Sans";
  --os-default-font-size: 10px;
  --os-link-color: light-dark(#017e84, #02c7b5);
  --os-link-hover-color: light-dark(#01585c, #4ed8cb);
  --os-text-body: light-dark(#374151, #e4e4e4); /* TEXT_BODY */
  --os-text-body-muted: light-dark(#374151c2, #b1b3bcc2); /* TEXT_BODY_MUTED */
  --os-disabled-text-color: light-dark(#cacaca, #ffffff80);

  --os-button-bg: light-dark(var(--os-gray-200), var(--os-gray-300));
  --os-button-hover-bg: light-dark(var(--os-gray-300), var(--os-gray-400));
  --os-button-hover-text-color: var(--os-gray-900);
  --os-button-active-bg: light-dark(#e6f2f3, #17373b);
  --os-button-active-text-color: var(--os-gray-900);
  --os-primary-button-bg: light-dark(#714b67, #6b3e66);
  --os-primary-button-hover-bg: light-dark(#624159, #7b4775);
  --os-primary-button-active-bg: light-dark(#f1edf0, #8b5185);
  --os-primary-button-text-color: light-dark(#ffffff, #ffffff);
  --os-action-color: var(--os-link-color); /* ACTION_COLOR */
  --os-action-color-hover: var(--os-link-hover-color);
  --os-border-color: light-dark(var(--os-gray-300), var(--os-gray-400));
  --os-hovered-menu-item-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));

  --os-composer-placeholder-color: light-dark(#bdbdbd, #757a89);
  --os-composer-assistant-color: #9b359b; /* COMPOSER_ASSISTANT_COLOR */
  --os-composer-assistant-background: light-dark(#f2f2f2, var(--os-gray-200));
  --os-composer-highlight-flag-color: light-dark(var(--os-gray-200), var(--os-gray-400));
  --os-composer-selector-flag-color: #a9a9a9;

  --os-selection-border-color: #3266ca; /* SELECTION_BORDER_COLOR */
  --os-badge-selected-color: var(--os-button-active-bg);
  --os-figure-border-color: var(--os-gray-400);
  --os-background-gray-color: light-dark(#f5f5f5, var(--os-white-bg));
  --os-background-gray-color-hover: light-dark(rgba(0, 0, 0, 0.08), #ffffff40);
  --os-frozen-pane-header-border-color: light-dark(
    #bcbcbc,
    #9fa5bd
  ); /* FROZEN_PANE_HEADER_BORDER_COLOR */
  --os-grid-border-color: light-dark(#e2e3e3, var(--os-gray-400));
  --os-canvas-border-color: light-dark(
    #e2e3e3,
    var(--os-gray-800)
  ); /* CANVAS_BORDER_COLOR: Dark mode color will be inverted */
  --os-green-arrow-color: #6aa84f; /* Same color as CF arrow icon */
  --os-red-arrow-color: #e06666; /* Same color as CF arrow icon */
  --os-active-sheet-bg: light-dark(#ffffff, var(--os-gray-300));

  --os-alert-warning-bg: light-dark(#fbebcc, #3a2a05);
  --os-alert-warning-border: light-dark(#f8e2b3, #5a420a);
  --os-alert-warning-text-color: light-dark(#946d23, #f5d27b);
  --os-alert-danger-bg: light-dark(#d44c591a, #3a0b0f);
  --os-alert-danger-border: light-dark(#c34a41, #a23c36);
  --os-alert-danger-text-color: light-dark(#c34a41, #ffb3a9);
  --os-alert-info-bg: light-dark(#cdedf1, #18535e);
  --os-alert-info-border: light-dark(#98dbe2, #22747e);
  --os-alert-info-text-color: light-dark(#09414a, #9ee3ec);

  --os-chart-preview-orange-line: light-dark(#eb6d00, #ff9d4d);
  --os-chart-preview-orange-fill: light-dark(#ffe1c8, #734200);
  --os-chart-preview-orange-light: light-dark(#ff9d4d, #eb6d00);
  --os-chart-preview-orange-dark: light-dark(#a34c00, #c96a1e);
  --os-chart-preview-blue-line: light-dark(#0074d9, #4cb3ff);
  --os-chart-preview-blue-fill: light-dark(#c4e4ff, #003e73);
  --os-chart-preview-green-line: light-dark(#00701e, #00a82d);
  --os-chart-preview-green-fill: light-dark(#ddffab, #385e00);

  --os-header-height: 26px;
  --os-header-width: 48px;
  --os-desktop-topbar-toolbar-height: 34px;
  --os-mobile-topbar-toolbar-height: 44px;
  --os-desktop-bottombar-height: 36px;
  --os-mobile-bottombar-height: 44px;
  --os-scrollbar-width: 15px;
  --os-autofill-edge-length: 8px;
  --os-icon-edge-length: 18px;
  --os-cf-icon-edge-length: 15px;
  --os-error-tooltip-width: 180px;
  --os-bubble-arrow-size: 7px;
  --os-master-chart-height: 60px;
  --os-link-tooltip-width: 220px;
  --os-link-tooltip-height: 32px;
  --os-desktop-menu-item-height: 26px;
  --os-mobile-menu-item-height: 35px;
  --os-menu-item-padding-vertical: 4px;
  --os-menu-item-padding-horizontal: 11px;
  --os-menu-vertical-padding: 8px;
  --os-line-vertical-padding: 1px;
  --os-picker-padding: 8px;
  --os-item-border-width: 1px;
  --os-item-edge-length: 18px;
  --os-items-per-line: 10;
  --os-magnifier-edge: 16px;
  --os-item-gap: 2px;
  --os-color-picker-width: calc(
    (var(--os-items-per-line) * (var(--os-item-edge-length) + (2 * var(--os-item-border-width)))) +
      ((var(--os-items-per-line) - 1) * var(--os-item-gap))
  );
  --os-inner-gradient-width: calc(var(--os-color-picker-width) - (2 * var(--os-item-border-width)));
  --os-inner-gradient-height: calc(
    var(--os-color-picker-width) - 30px - (2 * var(--os-item-border-width))
  );
  --os-container-width: calc(var(--os-color-picker-width) + (2 * var(--os-picker-padding)));
  --os-menu-separator-padding: 5px;

  --os-components-importance-grid: 0;
  --os-components-importance-grid-overlay: 1;
  --os-components-importance-highlight: 5;
  --os-components-importance-header-grouping-button: 6;
  --os-components-importance-figure: 10;
  --os-components-importance-figure-selected: 11;
  --os-components-importance-scroll-bar: 15;
  --os-components-importance-grid-popover: 19;
  --os-components-importance-grid-composer: 20;
  --os-components-importance-icon-picker: 25;
  --os-components-importance-top-bar-composer: 30;
  --os-components-importance-fullscreen-chart: 34;
  --os-components-importance-popover: 35;
  --os-components-importance-figure-anchor: 1000;
  --os-components-importance-figure-snap-line: 1001;
  --os-components-importance-figure-tooltip: 1002;

  --os-icon-font-size: 14px;
}