tailwind.css

/* This file defines the common tailwind CSS file to be imported by each project. */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /*
      Make sure these guidelines are followed: https://tailwindcss.com/docs/customizing-colors#using-css-variables
      when adding new variables. Spaces must be used.

      Colors are based off of https://www.figma.com/file/Md1Cl2B9eJi4NMzQgpbdMF/Dark-Mode?type=design&node-id=112-9885&mode=design&t=YKxx8fYvslM2TeLp-0.
    */

    --brand-400: 79 181 115;
    --brand-300: 123 199 150;
    --brand-200: 185 225 199;
    --brand-100: 220 240 227;

    --grey-0: 255 255 255;
    --grey-100: 250 250 250;
    --grey-200: 239 239 239;
    --grey-300: 210 213 217;
    --grey-400: 143 143 143;
    --grey-500: 84 85 85;
    --grey-600: 32 32 32;
    --grey-700: 0 0 0;

    --warning-400: 255 196 50;
    --warning-300: 255 211 101;
    --warning-200: 255 231 173;
    --warning-100: 255 243 214;

    --error-400: 255 69 38;
    --error-300: 230 115 92;
    --error-200: 242 181 168;
    --error-100: 248 218 212;

    --blue-400: 61 122 207;
    --blue-300: 109 155 219;
    --blue-200: 177 202 236;
    --blue-100: 216 228 245;
  }

  .dark {
    --brand-400: 123 199 150;
    --brand-300: 185 225 199;
    --brand-200: 220 240 227;
    --brand-100: 79 181 115;

    --grey-0: 0 0 0;
    --grey-100: 32 32 32;
    --grey-200: 84 85 85;
    --grey-300: 143 143 143;
    --grey-400: 210 213 217;
    --grey-500: 239 239 239;
    --grey-600: 250 250 250;
    --grey-700: 255 255 255;

    --warning-400: 255 211 101;
    --warning-300: 255 231 173;
    --warning-200: 255 243 214;
    --warning-100: 255 196 50;

    --error-400: 230 115 92;
    --error-300: 242 181 168;
    --error-200: 248 218 212;
    --error-100: 255 69 38;

    --blue-400: 109 155 219;
    --blue-300: 177 202 236;
    --blue-200: 216 228 245;
    --blue-100: 61 122 207;
  }
}