/* Primary sampled from the dark blue in assets/branding/praxisheft-logo-original.png: #0b3764. */
:root {
  --zeiten-primary: #0b3764;
  --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: #187cff;
  --zeiten-logo-orange: #09af70;
  --zeiten-logo-yellow: #bbcadb;
  --zeiten-logo-lime: #09af70;
  --zeiten-logo-green: #09af70;
  --zeiten-logo-cyan: #187cff;
  --zeiten-logo-blue: #187cff;
  --zeiten-logo-purple: #0b3764;

  --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);
}