base.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;

        --purple-400: 86 104 143;
        --purple-300: 128 142 171;
        --purple-200: 187 195 210;
        --purple-100: 221 225 233;
    }

    .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;

        --purple-400: 221 225 233;
        --purple-300: 187 195 210;
        --purple-200: 128 142 171;
        --purple-100: 86 104 143;
    }

    /* Center mermaid SVG diagrams. */
    main svg {
        margin: auto;
    }
}