/*
  Spreadwork theme tokens

  Change the hex values below to update colors across the app from one place.

  1. Page background color: #F3F3F3
  2. Spreadsheet accent color:
     Used for the active spreadsheet tab, spreadsheet column headers,
     and the "Showing rows in the XX step" banner: #FFFFFF
  3. Workflow accent color:
     Used for the active workflow tab and the workflow canvas: #FFFFFF
  4. Spreadsheet border color:
     Used for the active spreadsheet tab border and the spreadsheet panel border: #E5E7EB
  5. Workflow border color:
     Used for the active workflow tab border and the workflow panel border: #E5E7EB
  6. Top menu background color: #273035
  7. Top menu text and link color: #EBF3F2

  https://www.color-hex.com/color-palette/1072981
    --color-page-background: #fffaf0;
  --color-spreadsheet-accent: #FFFFFF;
  --color-workflow-accent: #FFFFFF;
  --color-spreadsheet-border: #e5e7eb;
  --color-workflow-border: #e5e7eb;
  --color-top-menu-background: #00205b;
  --color-top-menu-text: #EBF3F2;


Classic grey
  --color-page-background: #EFEFEF;
  --color-spreadsheet-accent: #FFFFFF;
  --color-workflow-accent: #FFFFFF;
  --color-spreadsheet-border: #FFFFFF;
  --color-workflow-border: #FFFFFF;
  --color-top-menu-background: #00205b;
  --color-top-menu-text: #EBF3F2;

  Coffe
    --color-page-background: #F9F5EB;
  --color-spreadsheet-accent: #E4DCCF;
  --color-workflow-accent: #ffffff;
  --color-spreadsheet-border: #E4DCCF;
  --color-workflow-border: #E4DCCF;
  --color-top-menu-background: #002B5B;
  --color-top-menu-text: #EBF3F2;
*/

:root {
  --color-page-background: #AFDADB;
  --color-spreadsheet-holder-bg: #64C5EB;
  --color-workflow-holder-bg: #ED4E73;
  --color-spreadsheet-accent: #d1eefc;
  --color-workflow-accent: #FFFFFF;
  --color-spreadsheet-border: #64C5EB;
  --color-workflow-border: #ED4E73;
  --color-board-divider: #FFFFFF;
  --color-spreadsheet-tab-inactive-bg: #AEE3FC;
  --color-workflow-tab-inactive-bg: #F490A6;
  --color-top-menu-background: #24324A;
  --color-top-menu-text: #F4F7FB;
  --color-top-menu-border: #30425F;
  --color-top-menu-surface: #2B3B57;
  --color-top-menu-surface-hover: #344866;
  --color-top-menu-surface-active: #41597D;
  --color-top-menu-dropdown-background: #F6F8FC;
  --color-top-menu-dropdown-border: #CCD5E3;
  --color-top-menu-dropdown-text: #152033;
  --color-top-menu-dropdown-hover: #E9EEF7;
  --color-top-menu-control-border: #4B6388;
  --color-top-menu-avatar-background: #324562;
  --color-top-menu-avatar-border: #58719A;
  --color-top-menu-avatar-hover: #3D5376;

  --board-top-half-bg: var(--color-spreadsheet-holder-bg);
  --board-bottom-half-bg: var(--color-workflow-holder-bg);
  --sheet-header-bg: var(--color-spreadsheet-accent);
  --spreadsheet-scrollbar-thumb-bg: var(--color-spreadsheet-accent);
  --grid-filter-banner-bg: #fcf3a6;
  --spreadsheet-tab-inactive-bg: var(--color-spreadsheet-tab-inactive-bg);
  --workflow-canvas-bg: var(--color-workflow-accent);
  --workflow-tab-active-bg: var(--color-workflow-accent);
  --workflow-tab-inactive-bg: var(--color-workflow-tab-inactive-bg);
  --workflow-scrollbar-thumb-bg: var(--color-workflow-tab-inactive-bg);
  --spreadsheet-border-color: var(--color-spreadsheet-border);
  --workflow-border-color: var(--color-workflow-border);
  --board-section-divider-color: var(--color-board-divider);
  --top-menu-bg: var(--color-top-menu-background);
  --top-menu-text: var(--color-top-menu-text);
  --top-menu-border: var(--color-top-menu-border);
  --top-menu-surface: var(--color-top-menu-surface);
  --top-menu-surface-hover: var(--color-top-menu-surface-hover);
  --top-menu-surface-active: var(--color-top-menu-surface-active);
  --top-menu-dropdown-bg: var(--color-top-menu-dropdown-background);
  --top-menu-dropdown-border: var(--color-top-menu-dropdown-border);
  --top-menu-dropdown-text: var(--color-top-menu-dropdown-text);
  --top-menu-dropdown-hover: var(--color-top-menu-dropdown-hover);
  --top-menu-control-border: var(--color-top-menu-control-border);
  --top-menu-avatar-bg: var(--color-top-menu-avatar-background);
  --top-menu-avatar-border: var(--color-top-menu-avatar-border);
  --top-menu-avatar-hover: var(--color-top-menu-avatar-hover);
}