/* AntflowAI application palette, aligned with Dashboard shared/ui/src/tokens.css.
 * Distributed locally so every application remains independently deployable.
 */
:root {
  color-scheme: light;
  --af-bg: #F5F7FA;
  --theme-color: var(--af-bg);
  --af-surface: #FFFFFF;
  --af-sunken: #EEF1F6;
  --af-sidebar: #FBFCFE;
  --af-hover: #E8F1FD;
  --af-text: #10192B;
  --af-muted: #5B6B84;
  --af-border: #E5E9F0;
  --af-border-strong: #D5DCE7;
  --af-primary: #0C66E4;
  --af-primary-rgb: 12 102 228;
  --af-primary-soft: #E8F1FD;
  --af-button-bg: #0C66E4;
  --af-button-hover: #0A56C2;
  --af-on-primary: #FFFFFF;
  --af-accent: #00B8D9;
  --af-accent-rgb: 0 184 217;
  --af-accent-text: #007E96;
  --af-error: #C93756;
  --af-error-bg: #FFF0F3;
  --af-error-border: #F1BAC6;
  --af-error-hover: #FFE3E9;
  --af-success: #087A54;
  --af-success-bg: #EAF9F3;
  --af-success-border: #ABDCCB;
  --af-success-hover: #D9F3E8;
  --af-warning: #875400;
  --af-warning-bg: #FFF7E6;
  --af-warning-border: #E9CF96;
  --af-warning-hover: #FFECCD;
  --af-shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
  --af-shadow-md: 0 4px 12px rgb(16 24 40 / 8%);
  --af-shadow-lg: 0 12px 32px rgb(16 24 40 / 12%);
  --af-gradient: linear-gradient(135deg, var(--af-primary), var(--af-accent));
  --af-focus: 0 0 0 3px rgb(var(--af-primary-rgb) / 16%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --af-bg: #050B14;
  --af-surface: #0F1C2E;
  --af-sunken: #142338;
  --af-sidebar: #0B1626;
  --af-hover: #172841;
  --af-text: #E6F0FF;
  --af-muted: #94A8C0;
  --af-border: #1E2D45;
  --af-border-strong: #2A3E5C;
  --af-primary: #3B82F6;
  --af-primary-rgb: 59 130 246;
  --af-primary-soft: #172841;
  /* Slightly deeper blue keeps small white button labels readable. */
  --af-button-bg: #2563EB;
  --af-button-hover: #1D4ED8;
  --af-accent: #00E5FF;
  --af-accent-rgb: 0 229 255;
  --af-accent-text: #00E5FF;
  --af-error: #FF8DA1;
  --af-error-bg: #321C2D;
  --af-error-border: #713549;
  --af-error-hover: #452337;
  --af-success: #34D399;
  --af-success-bg: #11392F;
  --af-success-border: #286650;
  --af-success-hover: #194B3D;
  --af-warning: #FBBF24;
  --af-warning-bg: #302719;
  --af-warning-border: #71582C;
  --af-warning-hover: #44351E;
  --af-shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);
  --af-shadow-md: 0 6px 20px rgb(0 0 0 / 45%);
  --af-shadow-lg: 0 16px 40px rgb(0 0 0 / 55%);
  --af-focus: 0 0 0 3px rgb(var(--af-primary-rgb) / 20%);
}