/* echo-work branding: light dark */
:root {
  --neutral-30: 255 255 255;
  --neutral-50: 246 249 250;
  --neutral-100: 241 245 247;
  --neutral-200: 226 232 236;
  --neutral-300: 201 212 218;
  --neutral-400: 154 170 179;
  --neutral-500: 91 107 115;
  --neutral-600: 74 90 98;
  --neutral-700: 47 62 70;
  --neutral-800: 19 32 38;
  --neutral-900: 10 17 21;
  --primary-30: 242 249 253;
  --primary-50: 233 244 251;
  --primary-100: 223 240 251;
  --primary-200: 190 215 226;
  --primary-300: 148 188 204;
  --primary-400: 106 159 180;
  --primary-500: 63 125 148;
  --primary-600: 47 100 121;
  --primary-700: 42 90 110;
  --primary-800: 37 77 95;
  --primary-900: 31 64 79;
  --accent-30: 255 250 235;
  --accent-50: 255 245 214;
  --accent-100: 253 238 184;
  --accent-200: 248 224 138;
  --accent-300: 242 201 76;
  --accent-400: 232 185 47;
  --accent-500: 220 171 26;
  --accent-600: 185 141 16;
  --accent-700: 143 108 12;
  --accent-800: 106 80 10;
  --accent-900: 70 53 7;
  --background: rgb(var(--neutral-50));
  --card: rgb(var(--neutral-30));
  --input: rgb(var(--neutral-30));
  --surface: rgb(var(--neutral-50));
  --muted: rgb(var(--neutral-100));
  --foreground: rgb(var(--neutral-800));
  --muted-foreground: rgb(var(--neutral-500));
  --border: rgb(var(--neutral-200));
  --border-strong: rgb(var(--neutral-300));
  --topbar: rgb(var(--primary-100));
  --sidebar: rgb(var(--primary-30));
  --heading: rgb(var(--primary-900));
  --nav-hover: rgb(var(--primary-50));
  --nav-active: rgb(var(--primary-100));
  --nav-active-foreground: rgb(var(--primary-900));
  --nav-active-border: rgb(var(--primary-500));
  --secondary-foreground: rgb(var(--primary-900));
  --secondary-border: rgb(var(--primary-200));
  --ring: rgb(var(--primary-500));
  --action: rgb(var(--accent-300));
  --action-hover: rgb(var(--accent-500));
  --action-foreground: rgb(var(--primary-900));
}
.dark {
  --neutral-30: 19 32 38;
  --neutral-50: 23 40 47;
  --neutral-100: 31 53 64;
  --neutral-200: 44 74 87;
  --neutral-300: 53 87 100;
  --neutral-400: 126 144 153;
  --neutral-500: 159 178 187;
  --neutral-600: 159 178 187;
  --neutral-700: 234 241 244;
  --neutral-800: 234 241 244;
  --neutral-900: 234 241 244;
  --primary-30: 21 37 44;
  --primary-50: 26 52 64;
  --primary-100: 31 64 79;
  --primary-200: 44 86 104;
  --primary-300: 53 101 119;
  --primary-400: 74 128 153;
  --primary-500: 95 160 189;
  --primary-600: 124 182 208;
  --primary-700: 163 207 227;
  --primary-800: 196 226 241;
  --primary-900: 223 240 251;
  --accent-30: 43 34 5;
  --accent-50: 74 58 7;
  --accent-100: 107 84 10;
  --accent-200: 143 111 11;
  --accent-300: 251 193 4;
  --accent-400: 253 200 29;
  --accent-500: 255 206 46;
  --accent-600: 255 215 92;
  --accent-700: 255 224 138;
  --accent-800: 255 234 179;
  --accent-900: 255 244 214;
  --background: rgb(var(--neutral-30));
  --card: rgb(var(--neutral-30));
  --input: rgb(var(--neutral-30));
  --surface: rgb(var(--neutral-50));
  --muted: rgb(var(--neutral-100));
  --foreground: rgb(var(--neutral-800));
  --muted-foreground: rgb(var(--neutral-500));
  --border: rgb(var(--neutral-200));
  --border-strong: rgb(var(--neutral-300));
  --topbar: rgb(var(--primary-100));
  --sidebar: rgb(var(--primary-30));
  --heading: rgb(var(--primary-900));
  --nav-hover: rgb(var(--primary-50));
  --nav-active: rgb(var(--primary-100));
  --nav-active-foreground: rgb(var(--primary-900));
  --nav-active-border: rgb(var(--primary-500));
  --secondary-foreground: rgb(var(--primary-900));
  --secondary-border: rgb(var(--primary-200));
  --ring: rgb(var(--primary-500));
  --action: rgb(var(--accent-300));
  --action-hover: rgb(var(--accent-500));
  --action-foreground: rgb(var(--primary-50));
}