/* =============================================
   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: #9a949c;
  --neut300: #555459;
  --neut400: #212026;

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

  /* Trend indicators (Sep 7 2026, updated same day) — up now uses the
     brand's own --teal (was a one-off green not in the brand book;
     replaced per Cio's request) for the Trending Now cards' up/down
     indicators. --stat-down still isn't a brand color — overtone-colors.md
     has no semantic red — reusing --secondr (Deep Pink) for now. */
  --stat-up:   var(--teal);
  --stat-down: var(--secondr);

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