@tailwind base;
@tailwind components;
@tailwind utilities;
/* NOTE: This file is not being used directly, however... */
/* It's easier to edit the colors here, and then convert to raw alpha in themes.css. */
@layer base {
  :root {
    /* Default theme */
    /* Base colors */
    --primary-100: #f1f1f7;
    --primary-200: #d1d0db;
    --primary-300: #b7b5c5;
    --primary-400: #9c9aae;
    --primary-500: #7d7b92;
    --primary-600: #626076;
    --primary-700: #403e54;
    --primary-800: #343344;
    --primary-900: #23222e;
    --primary-1000: #0d0d13;
    /* Key accent colors */
    --accent-100: #355ce9;
    --accent-200: #2c3d95;
    --flair-100: #40e4d8;
    --negative-100: #dc5068;
    /* Additional chart colors */
    --chart-1: #dc5068;
    --chart-2: #ef8c34;
    --chart-3: #f2bf3c;
    --chart-4: #17b4a1;
    --chart-5: #00b2ff;
    --chart-6: #2b46a9;
    --chart-7: #8c67f6;
  }

  .mysticalFire {
    /* Default theme */
    /* Base colors */
    --primary-100: #eef1f8;
    --primary-200: #ccd0dc;
    --primary-300: #aab0c7;
    --primary-400: #878fb1;
    --primary-500: #646e9b;
    --primary-600: #404e76;
    --primary-700: #1d2f52;
    --primary-800: #001a3f;
    --primary-900: #00092c;
    --primary-1000: #000016;
    /* Key accent colors */
    --accent-100: #184aff;
    --accent-200: #0029bd;
    --flair-100: #40e4d8;
    --negative-100: #dc5068;
    /* Additional chart colors */
    --chart-1: #fb9bf9;
    --chart-2: #ef347c;
    --chart-3: #f2bf3c;
    --chart-4: #9cd5ce;
    --chart-5: #c027b0;
    --chart-6: #6183ff;
    --chart-7: #4714d3;
  }

  .infiniteVoid {
    /* Default theme */
    /* Base colors */
    --primary-100: #e4e4f6;
    --primary-200: #c4c2e0;
    --primary-300: #a19dbd;
    --primary-400: #736f97;
    --primary-500: #4e4a78;
    --primary-600: #3d3a60;
    --primary-700: #25223f;
    --primary-800: #1e1d31;
    --primary-900: #0c0b14;
    --primary-1000: #040406;
    /* Key accent colors */
    --accent-100: #4d33e1;
    --accent-200: #1c0f65;
    --flair-100: #ff3bd8;
    --negative-100: #ce1433;
    /* Additional chart colors */
    --chart-1: #c10f5f;
    --chart-2: #0077ff;
    --chart-3: #8a2be2;
    --chart-4: #00219a;
    --chart-5: #9966cc;
    --chart-6: #008080;
    --chart-7: #8a9af7;
  }

  .deepLava {
    --primary-100: #f7f1f3;
    --primary-200: #dbd1d6;
    --primary-300: #c5b7bc;
    --primary-400: #ae9ca2;
    --primary-500: #927d87;
    --primary-600: #6e5e6a;
    --primary-700: #564550;
    --primary-800: #3e2e38;
    --primary-900: #281b20;
    --primary-1000: #16080a;
    /* Key accent colors */
    --accent-100: #e02b6b;
    --accent-200: #b8004d;
    --flair-100: #ffaa00;
    --negative-100: #dc5068;
    /* Additional chart colors */
    --chart-1: #ff5733; /* Persimmon */
    --chart-2: #48acc0; /* Caribbean blue  */
    --chart-3: #870485; /* Deep plum */
    --chart-4: #2d3b99; /* Cobalt */
    --chart-5: #9b5de5; /* Lavender Purple */
    --chart-6: #ffdd6c; /* Sunshine */
    --chart-7: #820b2f; /* Crimson */
  }

  .electricOcean {
    /* Base colors */
    --primary-100: #f1f1f7; /* Slightly bluish tint */
    --primary-200: #d1d1e0; /* More noticeable blue tint */
    --primary-300: #b7b7cc; /* Subtle blue undertone */
    --primary-400: #9c9cb9; /* Gentle blue hue */
    --primary-500: #7d7da3; /* Bluish-gray appearance */
    --primary-600: #626287; /* Grayscale with blue tint */
    --primary-700: #403e6b; /* Darker bluish-gray */
    --primary-800: #343359; /* Deeper blue-gray */
    --primary-900: #232240; /* Nearly gray with a hint of blue */
    --primary-1000: #0d0d1a; /* Dark gray-blue */

    /* Key accent colors */
    --accent-100: #45b3c7;
    --accent-200: #3a67fa;
    --flair-100: #0044ff;
    --negative-100: #dc5068;
    /* Additional chart colors */
    --chart-1: #d0ef34;
    --chart-2: #ffa81c;
    --chart-3: #fc387d;
    --chart-4: #fc38e2;
    --chart-5: #a600ff;
    --chart-6: #005476;
    --chart-7: #3dff9e;
  }
}
