/* Ei colour scale as custom properties — a transcription of
   design-system/tokens/color-tokens.md, which ships no CSS of its own.
   Raw paint only: names carry no meaning. Which hue means what is decided in
   design-system/guides/color.md, and applied in ../styles.css.

   The three --text-* roles are defined here because typography-tokens.css
   consumes them but leaves their values to the colour system. */

:root {
  --teal-primary: #0e9289;
  --teal-dark:    #01766f;
  --teal-light:   #39bcb3;

  --fuchsia-primary: #f263a2;
  --fuchsia-dark:    #e65796;
  --fuchsia-light:   #ffb9d8;

  --orange-80: #642405;
  --orange-70: #ac4413;
  --orange-60: #f88a56;
  --orange-30: #fbc4aa;
  --orange-10: #fef3ee;

  --blue-80: #0c3755;
  --blue-70: #0b66a3;
  --blue-60: #48a2df;
  --blue-30: #a3d0ef;
  --blue-10: #edf6fc;

  --purple-80: #311653;
  --purple-70: #7139b7;
  --purple-60: #b67efc;
  --purple-30: #dabefd;
  --purple-10: #f8f2ff;

  --yellow-80: #713f12;
  --yellow-60: #ffe53b;
  --yellow-30: #fff29d;
  --yellow-10: #fffceb;

  --success-60: #35b86a;
  --success-30: #9adbb4;
  --success-10: #ebf8f0;

  --error-60: #e14f2e;
  --error-30: #f0a796;
  --error-20: #f7cabf;

  --grey-100:   #18181c;
  --grey-90:    #41454a;
  --grey-80:    #6b7481;
  --grey-70:    #808b9a;
  --grey-60:    #a1aab6;
  --grey-50:    #bcc3cc;
  --grey-40:    #d3dbe4;
  --grey-30:    #ebf0f5;
  --grey-20:    #f1f5f9;
  --grey-10:    #f8fafc;
  --grey-white: #ffffff;

  --text-primary:   var(--grey-100);
  --text-secondary: var(--grey-80);
  --text-tertiary:  var(--grey-70);
}