/* ============================================
   VARIABLES.CSS - Design Tokens
   NDIStress - NDIS Governance & Compliance
   Purple/Orange brand palette
   ============================================ */

:root {
  /* ----------------------------------------
     COLORS - NDIStress Brand
     ---------------------------------------- */
  --color-primary:       #5B2D8E;        /* Purple - main brand */
  --color-primary-dark:  #462170;        /* Darker purple */
  --color-primary-light: #EDE7F6;        /* Light lavender */
  --color-accent:        #E8873D;        /* Orange - from logo */
  --color-accent-light:  #FFF3E8;        /* Light orange tint */
  --color-cream:         #F5F3F0;        /* Warm off-white */
  --color-white:         #FFFFFF;
  --color-dark:          rgba(7, 8, 7, 0.9);
  --color-border:        rgba(0, 0, 0, 0.12);
  --color-white-muted:   rgba(255, 255, 255, 0.2);
  --color-white-overlay: rgba(255, 255, 255, 0.8);
  --color-hero-overlay:  #2D1B4E;        /* Dark purple overlay */
  --color-featured-box:  rgba(91, 45, 142, 0.15);

  /* Gradient (logo-inspired) */
  --gradient-brand: linear-gradient(135deg, #5B2D8E, #E8873D);

  /* ----------------------------------------
     FONTS
     ---------------------------------------- */
  --font-body:     "Manrope", sans-serif;
  --font-heading:  "Ovo", serif;
  --font-nav:      "Bricolage Grotesque", sans-serif;

  /* ----------------------------------------
     TYPOGRAPHY - Body
     ---------------------------------------- */
  --body-size:     14px;
  --body-weight:   400;
  --body-lh:       1.6em;
  --body-ls:       0px;

  /* ----------------------------------------
     TYPOGRAPHY - Headings
     ---------------------------------------- */
  --h1-size: 60px;  --h1-weight: 400;  --h1-lh: 1.1em;  --h1-ls: -1px;
  --h2-size: 48px;  --h2-weight: 400;  --h2-lh: 1em;    --h2-ls: 0px;
  --h3-size: 34px;  --h3-weight: 400;  --h3-lh: 1.2em;  --h3-ls: 0px;
  --h4-size: 24px;  --h4-weight: 500;  --h4-lh: 1.5em;  --h4-ls: 0px;
  --h5-size: 20px;  --h5-weight: 500;  --h5-lh: 1.4em;  --h5-ls: 0px;
  --h6-size: 15px;  --h6-weight: 600;  --h6-lh: 1.3em;  --h6-ls: 0px;

  /* Hero title */
  --hero-size: 80px;  --hero-weight: 400;  --hero-lh: 1em;  --hero-ls: -3px;

  /* Nav items */
  --nav-size: 14px;  --nav-weight: 600;  --nav-lh: 1em;

  /* Labels */
  --label-size: 10px;  --label-weight: 500;  --label-ls: 2px;

  /* Body large */
  --body-lg-size: 16px;  --body-lg-lh: 1.9em;

  /* ----------------------------------------
     SPACING
     ---------------------------------------- */
  --radius-sm:   6px;
  --radius-lg:   24px;
  --radius-full: 50%;

  /* ----------------------------------------
     LAYOUT
     ---------------------------------------- */
  --header-h:         80px;
  --header-h-tablet:  70px;
  --header-h-mobile:  60px;
  --container-max:    1200px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --ease: 0.3s ease;
  --ease-fast: 0.2s ease;
  --ease-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ----------------------------------------
     SHADOWS
     ---------------------------------------- */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 30px rgba(91, 45, 142, 0.15);
}