/* All text, surfaces and status colors are defined here for both appearances. */
html.flozo-interface {
  --color-background: #f6f5f2;
  --color-surface: #ffffff;
  --color-surface-soft: #f3f4f5;
  --color-surface-strong: #eceff2;
  --color-sidebar: #fbfaf8;
  --color-text: #182333;
  --color-secondary: #536174;
  --color-muted: #657180;
  --color-border: #e0e4e8;
  --color-primary: #284d76;
  --color-primary-hover: #1e3b5c;
  --color-primary-soft: #eaf0f7;
  --color-on-primary: #ffffff;
  --color-warm: #765f42;
  --color-warm-soft: #f1eae0;
  --color-success: #326b52;
  --color-success-soft: #edf4ef;
  --color-warning: #98601f;
  --color-warning-soft: #faf0e1;
  --color-danger: #a03f52;
  --color-danger-soft: #faeced;
  --color-purple: #6c5782;
  --surface-shadow: 0 6px 20px rgb(28 40 58 / 3%);
  --deep-shadow: 0 18px 50px rgb(28 40 58 / 12%);
  --overlay: rgb(23 30 41 / 40%);
  color-scheme: light;
}
html.flozo-interface[data-flozo-mode="dark"] {
  --color-background: #151b23;
  --color-surface: #1d2632;
  --color-surface-soft: #242e3b;
  --color-surface-strong: #2b3746;
  --color-sidebar: #19212b;
  --color-text: #f0f2f6;
  --color-secondary: #b4beca;
  --color-muted: #9aa8b9;
  --color-border: #34404e;
  --color-primary: #a6c8ee;
  --color-primary-hover: #bdd8f5;
  --color-primary-soft: #2a3b51;
  --color-on-primary: #182c46;
  --color-warm: #c6ac8b;
  --color-warm-soft: #332e29;
  --color-success: #a5cfb4;
  --color-success-soft: #253b33;
  --color-warning: #e5bd84;
  --color-warning-soft: #3c3024;
  --color-danger: #eca4ae;
  --color-danger-soft: #412b34;
  --color-purple: #c3addd;
  --surface-shadow: 0 6px 20px rgb(0 0 0 / 8%);
  --deep-shadow: 0 18px 50px rgb(0 0 0 / 22%);
  --overlay: rgb(7 11 18 / 65%);
  color-scheme: dark;
}
/* Compatibility aliases keep the existing customer, editor and integration UI on the same tokens. */
html.flozo-interface[data-flozo-mode] {
  --bg: var(--color-background);
  --surface: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-secondary);
  --line: var(--color-border);
  --green: var(--color-primary);
  --green-soft: var(--color-primary-soft);
  --lime: var(--color-primary);
  --sand: var(--color-warm-soft);
  --orange: var(--color-warning);
  --red: var(--color-danger);
  --red-bg: var(--color-danger-soft);
  --blue: var(--color-primary);
  --shadow: var(--surface-shadow);
  --v24-bg: var(--color-background);
  --v24-surface: var(--color-surface);
  --v24-surface-2: var(--color-surface-soft);
  --v24-surface-3: var(--color-surface-strong);
  --v24-ink: var(--color-text);
  --v24-muted: var(--color-secondary);
  --v24-line: var(--color-border);
  --v24-accent: var(--color-primary);
  --v24-accent-2: var(--color-warm);
  --v24-warm: var(--color-warm);
  --v24-blue: var(--color-primary);
  --v24-purple: var(--color-purple);
  --v24-danger: var(--color-danger);
  --v24-panel-shadow: var(--surface-shadow);
  --cp6-ink: var(--color-text);
  --cp6-muted: var(--color-secondary);
  --cp6-line: var(--color-border);
}