/* Primary sampled from the dark blue in icons/logo-source.png: #04386b. */
:root {
  --zeiten-primary: #04386b;
  --zeiten-primary-hover: #032a51;
  --zeiten-primary-active: #02203e;
  --zeiten-primary-tint: #eef4fa;
  --zeiten-primary-light: #c6d9ed;
  --zeiten-focus: var(--zeiten-primary);
  --zeiten-paper: #ffffff;
  --zeiten-ink: var(--zeiten-primary);
  --zeiten-muted: var(--zeiten-primary);
  --zeiten-line: #cad5e1;
  --zeiten-danger: #b42318;
  --zeiten-danger-tint: #fff1f0;
  /* Decorative tile accents sampled from the unchanged original logo. */
  --zeiten-logo-red: #e31920;
  --zeiten-logo-orange: #ef5f1f;
  --zeiten-logo-yellow: #fec504;
  --zeiten-logo-lime: #88b91e;
  --zeiten-logo-green: #029849;
  --zeiten-logo-cyan: #00a6e9;
  --zeiten-logo-blue: #086fc3;
  --zeiten-logo-purple: #833ca5;

  --ink: var(--zeiten-ink);
  --muted: var(--zeiten-muted);
  --line: var(--zeiten-line);
  --paper: var(--zeiten-paper);
  --canvas: var(--zeiten-paper);

  /* Syncfusion Fluent 2 consumes these variables for all shared controls. */
  --color-sf-primary: var(--zeiten-primary);
  --color-sf-primary-text-color: var(--zeiten-paper);
  --color-sf-primary-light: var(--zeiten-primary-light);
  --color-sf-primary-lighter: var(--zeiten-primary-tint);
  --color-sf-primary-dark: var(--zeiten-primary-hover);
  --color-sf-primary-darker: var(--zeiten-primary-active);
  --color-sf-brand-primary: var(--zeiten-primary);
  --color-sf-brand-primary-d10: var(--zeiten-primary-hover);
  --color-sf-primary-bg-color-hover: var(--zeiten-primary-hover);
  --color-sf-primary-bg-color-pressed: var(--zeiten-primary-active);
  --color-sf-primary-bg-color-selected: var(--zeiten-primary-hover);
  --color-sf-content-bg-color: var(--zeiten-paper);
  --color-sf-content-bg-color-alt1: var(--zeiten-paper);
  --color-sf-content-bg-color-hover: var(--zeiten-primary-tint);
  --color-sf-content-bg-color-focus: var(--zeiten-primary-tint);
  --color-sf-content-bg-color-selected: var(--zeiten-primary-tint);
  --color-sf-content-bg-color-dragged: var(--zeiten-primary-tint);
  --color-sf-flyout-bg-color: var(--zeiten-paper);
  --color-sf-flyout-bg-color-selected: var(--zeiten-primary-tint);
  --color-sf-table-bg-color-hover: var(--zeiten-primary-tint);
  --color-sf-table-bg-color-selected: var(--zeiten-primary-tint);
  --color-sf-content-text-color: var(--zeiten-ink);
  --color-sf-content-text-color-alt1: var(--zeiten-muted);
  --color-sf-content-text-color-alt2: var(--zeiten-muted);
  --color-sf-content-text-color-alt3: var(--zeiten-muted);
  --color-sf-placeholder-text-color: var(--zeiten-muted);
  --color-sf-icon-color: var(--zeiten-primary);
  --color-sf-border: var(--zeiten-line);
  --color-sf-border-light: var(--zeiten-line);
  --color-sf-border-focus: var(--zeiten-focus);
  --color-sf-secondary-border-color-focus: var(--zeiten-focus);
  --color-sf-secondary-text-color: var(--zeiten-primary);
  --color-sf-danger: var(--zeiten-danger);
  --color-sf-border-error: var(--zeiten-danger);
}