/* =============================================
   GLOBAL VARIABLES
   CSS custom properties (variables) available across the entire project.
   Includes: colour palette, font families, spacing scales, breakpoints.
   If it's a value referenced with var(--name) anywhere in the codebase, it belongs here.
   ============================================= */
   
:root {
  /* Primary Colors */
  --lavender: #9647b2;
  --teal:     #29b1cc;
  --purp500:  #5947B2;

  /* Tones */
  --purp100: #FBFAFF;
  --purp200: #E4E1F2;
  --purp300: #B5ADD9;
  --purp400: #7869BF;
  --purp600: #3A2699;
  --purp700: #302080;
  --purp800: #2B1F66;
  --purp900: #1E1259;

  /* Neutrals */
  --neutral: #F1F1F1;
  --neut100: #F1EEFC;
  --neut200: #a9a8b2;
  --neut300: #555459;
  --neut400: #212026;

  /* Secondary Colors */
  --secondp: #461959;
  --secondm: #D09900;
  --secondr: #E62A76;
  --secondt: #AED8CC;

   /* Typography */
  --body: "Manrope", sans-serif;
  --head: "Encode Sans Semi Condensed", sans-serif;
}