// coffeylabs.org palette. Mastodon builds its scheme tokens from the grey
// and indigo scales, so those become Coffey Labs' blue-slate and blue; the
// semantic tokens that need an exact coffeylabs.org value are set after.

html {
  // Blue-slate, from the ground (#0C1017) up to the light ground (#EEF2F7)
  --color-grey-50: #eef2f7;
  --color-grey-100: #dce6f2;
  --color-grey-200: #c3d0df;
  --color-grey-300: #a7b8cc;
  --color-grey-400: #8fa3bc;
  --color-grey-500: #6b7c92;
  --color-grey-600: #46586e;
  --color-grey-700: #2f3d52;
  --color-grey-800: #222d3c;
  --color-grey-900: #131923;
  --color-grey-950: #0c1017;

  // Blue accent, #4EA8FF on dark and #1668C7 on light
  --color-indigo-50: #eef6ff;
  --color-indigo-100: #dceeff;
  --color-indigo-200: #b9dcff;
  --color-indigo-300: #7dc0ff;
  --color-indigo-400: #4ea8ff;
  --color-indigo-500: #2f8fef;
  --color-indigo-600: #1668c7;
  --color-indigo-700: #0f54a5;
  --color-indigo-800: #0e4380;
  --color-indigo-900: #0f3360;
  --color-indigo-950: #0b1f3a;

  // Status colors from coffeylabs.org: live green, warm orange
  --color-green-400: #3ddc97;
  --color-green-600: #0e8a5a;
  --color-yellow-400: #ff8a00;
  --color-yellow-700: #c75a00;

  --cl-grid-line: rgb(78 168 255 / 6%);
  --cl-glow: rgb(78 168 255 / 20%);
}

[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  --color-text-primary: #dce6f2;
  --color-text-secondary: #8fa3bc;
  --color-text-tertiary: #5f7288;
  --color-text-brand: #4ea8ff;

  --color-bg-primary: #0c1017;
  --color-bg-secondary: #131923;
  --color-bg-tertiary: #18202c;

  // Accent buttons are bright blue with dark ink, as on coffeylabs.org
  --color-bg-brand-base: #4ea8ff;
  --color-bg-brand-base-hover: #7dc0ff;
  --color-text-on-brand-base: #06101c;
  --color-bg-brand-soft: #12304f;
  --color-bg-brand-softest: #0f1d2e;
  --color-border-brand-soft: #1f4b78;

  --color-border-primary: #222d3c;

  --dropdown-shadow:
    0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px -12px rgb(0 0 0 / 60%);
}

[data-color-scheme='light'] {
  --color-text-primary: #0f1822;
  --color-text-secondary: #46586e;
  --color-text-tertiary: #6b7c92;
  --color-text-brand: #1668c7;

  --color-bg-primary: #fff;
  --color-bg-secondary: #eef2f7;
  --color-bg-tertiary: #e9eff6;

  --color-bg-brand-base: #1668c7;
  --color-bg-brand-base-hover: #0f54a5;
  --color-text-on-brand-base: #fff;
  --color-bg-brand-soft: #dceeff;
  --color-bg-brand-softest: #eef6ff;

  --color-border-primary: #d6dfea;

  --dropdown-shadow:
    0 1px 2px rgb(15 24 34 / 5%), 0 8px 24px -12px rgb(15 24 34 / 14%);
  --cl-grid-line: rgb(22 104 199 / 7%);
  --cl-glow: rgb(22 104 199 / 14%);
}