@tailwind base;
@tailwind components;
@tailwind utilities;

/* custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* skin colors + global styles */
@layer base {
  html {
    --color-black: #080808;
    --color-dark: #1e1e1e;
    --color-white: #FFFFFF;
    --color-red: #ED1C25;
    --color-blue-01: #3A3FD8;
    --color-blue-02: #2E3191;
    --color-gray-01: #F9F9FB;
    --color-gray-02: #F4F4F4;
    --color-gray-03: #E0E2E3;
    --color-gray-04: #949499;
    --color-gray-05: #4E4F54;
    --color-gray-06: #171717;
    --color-text-base: #000000;
    --color-text-muted: #949499;
    --color-text-muted-hover: #4E4F54;
    --color-text-inverted: #FFFFFF;
    --color-text-primary: #ED1C25;
    --color-text-secondary: #3A3FD8;
    --color-text-secondary-hover: #4a5bdb;
    --color-fill-section: #F4F4F4;
  }

  /* 👇 THIS IS THE IMPORTANT PART */
  body {
    @apply bg-base-dark text-white min-h-screen font-montserrat;
  }
}

/* debug helpers */
.debug-border-red {
  @apply border border-solid border-red-500;
}

.debug-border-blue {
  @apply border border-solid border-blue-500;
}

.debug-border-green {
  @apply border border-solid border-green-500;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */