:root {
  /* light office */
  --color-office-light-background: #ffffff;
  --color-office-light-surface: #f5f5f5;
  --color-office-light-surface-bright: #ffffff;
  --color-office-light-surface-light: #e8e8e8;
  --color-office-light-surface-variant: #2c5f9e;
  --color-office-light-on-surface-variant: #f5f5f5;
  --color-office-light-primary: #2c5f9e;
  --color-office-light-primary-darken-1: #25508e;
  --color-office-light-secondary: #5f9ea0;
  --color-office-light-secondary-darken-1: #4f8e90;
  --color-office-light-error: #8b0000;
  --color-office-light-info: #4682b4;
  --color-office-light-success: #2e8b57;
  --color-office-light-warning: #daa520; /* dark office */
  --color-office-dark-background: #0a1a2f;
  --color-office-dark-surface: #1a2a3f;
  --color-office-dark-surface-bright: #2a3a4f;
  --color-office-dark-surface-light: #142235;
  --color-office-dark-surface-variant: #7eb6ff;
  --color-office-dark-on-surface-variant: #0a1a2f;
  --color-office-dark-primary: #7eb6ff;
  --color-office-dark-primary-darken-1: #6ea6ef;
  --color-office-dark-secondary: #8fd0d2;
  --color-office-dark-secondary-darken-1: #7fc0c2;
  --color-office-dark-error: #cd5c5c;
  --color-office-dark-info: #6a9fcf;
  --color-office-dark-success: #5eab7f;
  --color-office-dark-warning: #e8c54f;
}
.theme-office-light {
  --color-tw-background: var(--color-office-light-background);
  --color-tw-surface: var(--color-office-light-surface);
  --color-tw-surface-bright: var(--color-office-light-surface-bright);
  --color-tw-surface-light: var(--color-office-light-surface-light);
  --color-tw-surface-variant: var(--color-office-light-surface-variant);
  --color-tw-on-surface-variant: var(--color-office-light-on-surface-variant);
  --color-tw-primary: var(--color-office-light-primary);
  --color-tw-primary-darken-1: var(--color-office-light-primary-darken-1);
  --color-tw-secondary: var(--color-office-light-secondary);
  --color-tw-secondary-darken-1: var(--color-office-light-secondary-darken-1);
  --color-tw-error: var(--color-office-light-error);
  --color-tw-info: var(--color-office-light-info);
  --color-tw-success: var(--color-office-light-success);
  --color-tw-warning: var(--color-office-light-warning);
}
.theme-office-dark {
  --color-tw-background: var(--color-office-dark-background);
  --color-tw-surface: var(--color-office-dark-surface);
  --color-tw-surface-bright: var(--color-office-dark-surface-bright);
  --color-tw-surface-dark: var(--color-office-dark-surface-dark);
  --color-tw-surface-variant: var(--color-office-dark-surface-variant);
  --color-tw-on-surface-variant: var(--color-office-dark-on-surface-variant);
  --color-tw-primary: var(--color-office-dark-primary);
  --color-tw-primary-darken-1: var(--color-office-dark-primary-darken-1);
  --color-tw-secondary: var(--color-office-dark-secondary);
  --color-tw-secondary-darken-1: var(--color-office-dark-secondary-darken-1);
  --color-tw-error: var(--color-office-dark-error);
  --color-tw-info: var(--color-office-dark-info);
  --color-tw-success: var(--color-office-dark-success);
  --color-tw-warning: var(--color-office-dark-warning);
}