/* ==========================================================================
   BRAND COLOR PALETTE & SPECTRUM TOKENS
   ==========================================================================
   Purple spectrum dark to light:
   #3f2d70 #6549a3 #7859bc #9b87ce #cfc3e9 #e8e1f5

   Sage dark to light:
   #4b6259 #758f84 #8ba49a #a1b7ae #cedbd5 #e5ebe8

   Black and white usage:
   #f9f5f2 #000000
   ========================================================================== */

:root {
  /* Purple Spectrum (Dark to Light) */
  --color-purple-900: #3f2d70;
  --color-purple-700: #6549a3;
  --color-purple-500: #7859bc;
  --color-purple-400: #9b87ce;
  --color-purple-300: #cfc3e9;
  --color-purple-100: #e8e1f5;

  /* Sage Spectrum (Dark to Light) */
  --color-sage-900: #4b6259;
  --color-sage-700: #758f84;
  --color-sage-500: #8ba49a;
  --color-sage-400: #a1b7ae;
  --color-sage-300: #cedbd5;
  --color-sage-100: #e5ebe8;

  /* Black and White Palette */
  --color-off-white: #f9f5f2;
  --color-black: #000000;

  --font-heading: 'Playfair Display', sans-serif;
  --font-body: 'Lato', sans-serif;

  --color-primary: #7859BC;
  --color-primary-hover: #CFC3E9;
  --color-accent: #8BA49A;
  --color-accent-hover: rgb(104, 123, 115);
  --color-bg: #F9F5F2;
  --color-dark-bg: #282828;
  --color-surface: #ffffff;
  --color-heading: #7859BC;
  --color-text: #1c2820;
  --color-text-muted: #4a5a50;
  --color-border: #e8e4dc;
  --color-btn-text: #F9F5F2;
  --color-footer-bg: #282828;
  --color-footer-text: #ffffff;
  --color-footer-muted: rgba(255, 255, 255, 0.75);
  --color-footer-border: rgba(255, 255, 255, 0.12);

  --mc-accent: #8BA49A;
  --mc-heading: #7859BC;
  --mc-text-main: #7859BC;
  --mc-border: #e8e4dc;
  --mc-text-light: #4a5a50;

  --hero-overlay-start: rgba(42, 31, 65, 0.94);
  --hero-overlay-end: rgba(120, 89, 188, 0.84);
  --hero-bg-url: url('../images/HowMyGenesWork-Hero.jpg');

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-btn: 6px;
  --radius-card: 8px;

  --btn-text-transform: uppercase;
  --btn-font-weight: 800;
  --btn-letter-spacing: 1px;

  --h1-size: 3.75rem;
  --h2-size: 2.5rem;
  --h3-size: 1.4rem;
  --h4-size: 1.15rem;
  --h5-size: 0.95rem;
  --h6-size: 0.85rem;
}