/* Desktop brand. */
:root[data-brand="desktop"] {
  --color-brand-bg: var(--color-accent-blue-600);
  --color-brand-hover: var(--color-accent-blue-500);
  --color-brand-text-light: var(--color-accent-blue-600);
  --color-brand-text-dark: var(--color-accent-blue-400);
  --color-text-on-brand: var(--color-neutrals-opaque-light-0);

  --color-surface-brand-primary: var(--color-brand-bg);
  --color-surface-brand-secondary: var(--color-brand-hover);
  --color-border-brand: var(--color-brand-hover);
  --color-text-on-brand: var(--color-neutrals-opaque-light-0);
  --color-text-brand: var(--color-brand-text-light);
}

/* Dark theme. */
:root {
  --color-surface-base: var(--color-neutrals-opaque-dark-0);
  --color-surface-canvas: var(--color-neutrals-opaque-dark-50);
  --color-surface-subtle: var(--color-neutrals-opaque-dark-100);
  --color-surface-mid: var(--color-neutrals-opaque-dark-150);
  --color-surface-strong: var(--color-neutrals-opaque-dark-200);
  --color-surface-alpha-subtle: var(--color-neutrals-alpha-dark-50);
  --color-surface-alpha-mid: var(--color-neutrals-alpha-dark-100);
  --color-surface-alpha-strong: var(--color-neutrals-alpha-dark-200);
  --color-surface-open: var(--color-accent-green-900);
  --color-surface-merged: var(--color-accent-blue-900);
  --color-surface-archived: var(--color-accent-pink-900);

  --color-text-primary: var(--color-neutrals-opaque-dark-900);
  --color-text-secondary: var(--color-neutrals-opaque-dark-700);
  --color-text-tertiary: var(--color-neutrals-opaque-dark-600);
  --color-text-quarternary: var(--color-neutrals-opaque-dark-500);
  --color-text-disabled: var(--color-neutrals-alpha-dark-400);
  --color-text-open: var(--color-accent-green-500);
  --color-text-merged: var(--color-accent-blue-500);
  --color-text-archived: var(--color-accent-pink-500);

  --color-border-subtle: var(--color-neutrals-opaque-dark-150);
  --color-border-mid: var(--color-neutrals-opaque-dark-200);
  --color-border-strong: var(--color-neutrals-opaque-dark-300);
  --color-border-alpha-subtle: var(--color-neutrals-alpha-dark-100);
  --color-border-alpha-mid: var(--color-neutrals-alpha-dark-200);

  --color-feedback-success-text: var(--color-semantic-green-400);
  --color-feedback-success-border: var(--color-semantic-green-700);
  --color-feedback-success-bg: var(--color-semantic-green-900);
  --color-feedback-warning-text: var(--color-semantic-amber-400);
  --color-feedback-warning-border: var(--color-semantic-amber-700);
  --color-feedback-warning-bg: var(--color-semantic-amber-900);
  --color-feedback-error-text: var(--color-semantic-red-400);
  --color-feedback-error-border: var(--color-semantic-red-700);
  --color-feedback-error-bg: var(--color-semantic-red-900);

  --color-code-keywords: var(--color-accent-blue-400);
  --color-code-strings: var(--color-accent-green-400);
  --color-code-numbers: var(--color-accent-purple-400);
  --color-code-comments: var(--color-neutrals-opaque-dark-700);
  --color-code-error: var(--color-semantic-red-400);
  --color-code-functions: var(--color-accent-emerald-400);

  /* Garden brand. */
  --color-brand-bg: var(--color-accent-green-500);
  --color-brand-hover: var(--color-accent-green-400);
  --color-brand-text-light: var(--color-accent-green-800);
  --color-brand-text-dark: var(--color-accent-green-400);
  --color-text-on-brand: var(--color-neutrals-opaque-dark-0);

  --color-surface-brand-primary: var(--color-brand-bg);
  --color-surface-brand-secondary: var(--color-brand-hover);
  --color-border-brand: var(--color-brand-hover);
  --color-text-on-brand: var(--color-neutrals-opaque-dark-0);
  --color-text-brand: var(--color-brand-text-light);
}

/* Desktop brand. */
:root[data-theme="dark"][data-brand="desktop"] {
  --color-text-brand: var(--color-brand-text-dark);
}

/* Internal color system, don't use directly! */
:root {
  --color-neutrals-opaque-light-0: #ffffff;
  --color-neutrals-opaque-light-50: #f8f9fa;
  --color-neutrals-opaque-light-100: #f1f3f5;
  --color-neutrals-opaque-light-150: #e9ebef;
  --color-neutrals-opaque-light-200: #e1e4e8;
  --color-neutrals-opaque-light-250: #d6d9e0;
  --color-neutrals-opaque-light-300: #c9cdd4;
  --color-neutrals-opaque-light-400: #a2a7b1;
  --color-neutrals-opaque-light-500: #7a8190;
  --color-neutrals-opaque-light-600: #5a5f6b;
  --color-neutrals-opaque-light-700: #3a3f49;
  --color-neutrals-opaque-light-800: #1f232b;
  --color-neutrals-opaque-light-900: #0b0d12;

  --color-neutrals-opaque-dark-0: #00060f;
  --color-neutrals-opaque-dark-50: #0a1018;
  --color-neutrals-opaque-dark-100: #141a22;
  --color-neutrals-opaque-dark-150: #1f242c;
  --color-neutrals-opaque-dark-200: #29303a;
  --color-neutrals-opaque-dark-250: #33383f;
  --color-neutrals-opaque-dark-300: #3d4248;
  --color-neutrals-opaque-dark-400: #52565c;
  --color-neutrals-opaque-dark-500: #666a6f;
  --color-neutrals-opaque-dark-600: #8f9296;
  --color-neutrals-opaque-dark-700: #b8babc;
  --color-neutrals-opaque-dark-800: #e0e1e2;
  --color-neutrals-opaque-dark-900: #ffffff;

  --color-neutrals-alpha-light-50: #00060f0a;
  --color-neutrals-alpha-light-100: #00060f14;
  --color-neutrals-alpha-light-200: #00060f1f;
  --color-neutrals-alpha-light-300: #00060f29;
  --color-neutrals-alpha-light-400: #00060f3d;
  --color-neutrals-alpha-light-500: #00060f52;
  --color-neutrals-alpha-light-600: #00060f7a;
  --color-neutrals-alpha-light-700: #00060fa3;
  --color-neutrals-alpha-light-800: #00060fcc;
  --color-neutrals-alpha-light-900: #00060feb;

  --color-neutrals-alpha-dark-50: #ffffff0a;
  --color-neutrals-alpha-dark-100: #ffffff14;
  --color-neutrals-alpha-dark-200: #ffffff1f;
  --color-neutrals-alpha-dark-300: #ffffff29;
  --color-neutrals-alpha-dark-400: #ffffff3d;
  --color-neutrals-alpha-dark-500: #ffffff52;
  --color-neutrals-alpha-dark-600: #ffffff7a;
  --color-neutrals-alpha-dark-700: #ffffffa3;
  --color-neutrals-alpha-dark-800: #ffffffcc;
  --color-neutrals-alpha-dark-900: #ffffffeb;

  --color-accent-blue-0: #f4f9ff;
  --color-accent-blue-100: #d6e9ff;
  --color-accent-blue-200: #afcfff;
  --color-accent-blue-300: #7fb0ff;
  --color-accent-blue-400: #4d94ff;
  --color-accent-blue-500: #1c77ff;
  --color-accent-blue-600: #165fcc;
  --color-accent-blue-700: #104799;
  --color-accent-blue-800: #0b3266;
  --color-accent-blue-900: #061d33;

  --color-accent-green-0: #f7fff2;
  --color-accent-green-100: #dffcc6;
  --color-accent-green-200: #bef98a;
  --color-accent-green-300: #99f24c;
  --color-accent-green-400: #73e926;
  --color-accent-green-500: #58e600;
  --color-accent-green-600: #46ba00;
  --color-accent-green-700: #358f00;
  --color-accent-green-800: #256400;
  --color-accent-green-900: #0a1f00;

  --color-accent-cyan-0: #f1fefe;
  --color-accent-cyan-100: #ccf9fa;
  --color-accent-cyan-200: #99eff0;
  --color-accent-cyan-300: #66e5e7;
  --color-accent-cyan-400: #33dbde;
  --color-accent-cyan-500: #00d4da;
  --color-accent-cyan-600: #00a8ae;
  --color-accent-cyan-700: #007d82;
  --color-accent-cyan-800: #005256;
  --color-accent-cyan-900: #00292b;

  --color-accent-purple-0: #f7f5ff;
  --color-accent-purple-100: #e0daff;
  --color-accent-purple-200: #c0b5ff;
  --color-accent-purple-300: #a08fff;
  --color-accent-purple-400: #8a74fa;
  --color-accent-purple-500: #886bf2;
  --color-accent-purple-600: #6c54c2;
  --color-accent-purple-700: #503f91;
  --color-accent-purple-800: #352a61;
  --color-accent-purple-900: #1b1530;

  --color-accent-pink-0: #fff6ff;
  --color-accent-pink-100: #ffedff;
  --color-accent-pink-200: #ffdbff;
  --color-accent-pink-300: #ffc9ff;
  --color-accent-pink-400: #ffb7ff;
  --color-accent-pink-500: #ffa5ff;
  --color-accent-pink-600: #cc84cc;
  --color-accent-pink-700: #996399;
  --color-accent-pink-800: #664266;
  --color-accent-pink-900: #332133;

  --color-accent-emerald-0: #f2fcf9;
  --color-accent-emerald-100: #ccf4e4;
  --color-accent-emerald-200: #99e9ca;
  --color-accent-emerald-300: #66ddb0;
  --color-accent-emerald-400: #33d196;
  --color-accent-emerald-500: #009f67;
  --color-accent-emerald-600: #007f52;
  --color-accent-emerald-700: #005f3e;
  --color-accent-emerald-800: #004029;
  --color-accent-emerald-900: #002015;

  --color-accent-citrus-0: #fcfff2;
  --color-accent-citrus-100: #f1ffbf;
  --color-accent-citrus-200: #e4ff80;
  --color-accent-citrus-300: #d6ff40;
  --color-accent-citrus-400: #caff20;
  --color-accent-citrus-500: #ccff38;
  --color-accent-citrus-600: #a4cc2d;
  --color-accent-citrus-700: #7c991f;
  --color-accent-citrus-800: #536613;
  --color-accent-citrus-900: #2b3307;

  --color-accent-olive-0: #fafaed;
  --color-accent-olive-100: #e6e5ba;
  --color-accent-olive-200: #d1cf86;
  --color-accent-olive-300: #bdb950;
  --color-accent-olive-400: #9e9900;
  --color-accent-olive-500: #585600;
  --color-accent-olive-600: #464400;
  --color-accent-olive-700: #343300;
  --color-accent-olive-800: #232200;
  --color-accent-olive-900: #111100;

  --color-semantic-red-0: #fff5f5;
  --color-semantic-red-100: #ffd6d6;
  --color-semantic-red-200: #ffafaf;
  --color-semantic-red-300: #ff8686;
  --color-semantic-red-400: #ff5c5c;
  --color-semantic-red-500: #ff4d4f;
  --color-semantic-red-600: #cc3e3f;
  --color-semantic-red-700: #992f2f;
  --color-semantic-red-800: #661f20;
  --color-semantic-red-900: #330f10;

  --color-semantic-amber-0: #fffdf2;
  --color-semantic-amber-100: #fff1b8;
  --color-semantic-amber-200: #ffe58f;
  --color-semantic-amber-300: #ffd666;
  --color-semantic-amber-400: #ffc53d;
  --color-semantic-amber-500: #faad14;
  --color-semantic-amber-600: #d48806;
  --color-semantic-amber-700: #ad6800;
  --color-semantic-amber-800: #874d00;
  --color-semantic-amber-900: #613400;

  --color-semantic-green-0: #f6fff1;
  --color-semantic-green-100: #d9f7be;
  --color-semantic-green-200: #b7eb8f;
  --color-semantic-green-300: #95de64;
  --color-semantic-green-400: #73d13d;
  --color-semantic-green-500: #52c41a;
  --color-semantic-green-600: #3d9914;
  --color-semantic-green-700: #2e7010;
  --color-semantic-green-800: #1e470a;
  --color-semantic-green-900: #0f2305;

  --color-semantic-blue-0: #f0f9ff;
  --color-semantic-blue-100: #c6e4ff;
  --color-semantic-blue-200: #91caff;
  --color-semantic-blue-300: #5bafff;
  --color-semantic-blue-400: #2896ff;
  --color-semantic-blue-500: #1890ff;
  --color-semantic-blue-600: #1373cc;
  --color-semantic-blue-700: #0e5799;
  --color-semantic-blue-800: #093c66;
  --color-semantic-blue-900: #051f33;
}