/**
 * Growing Space Design System
 * ============================
 * Extracted from thegrowingspace.com.au — June 2026
 * Pass this file to Claude Code during your build phase.
 */

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* --- Structural / Brand Colours --- */
  --color-purple-deep:     #26173C;   /* Top utility bar */
  --color-purple-brand:    #5E3A96;   /* Main header, key sections */
  --color-purple-soft:     #7E61AB;   /* Sub-headings, role labels */
  --color-purple-light:    #ECE8F3;   /* Hover states, subtle backgrounds */
  --color-blue-royal:      #2663B6;   /* Footer background */
  --color-orange-cta:      #F15F22;   /* Primary CTA buttons */

  /* --- Category / Feature Tile Colours --- */
  --color-tile-green:      #89CD4B;   /* "About" tile */
  --color-tile-cobalt:     #2663B7;   /* "NDIS Support Coordination" tile */
  --color-tile-lavender:   #6B81DB;   /* "Kits & Workshops" tile */
  --color-tile-pink:       #D74172;   /* "Membership & Resources" tile */

  /* --- Neutral Backgrounds --- */
  --color-bg-white:        #FFFFFF;
  --color-bg-cream:        #FEEFE9;   /* "About / Profile" section warmth */
  --color-bg-near-white:   #FCFBFD;
  --color-bg-light-grey:   #FAF9F5;   /* Soft button background */

  /* --- Text Colours --- */
  --color-text-dark:       #3B3B3B;   /* Body paragraphs */
  --color-text-near-black: #0C1115;   /* Strong headings */
  --color-text-white:      #FFFFFF;
  --color-text-link:       #008FFF;   /* Default hyperlinks */
  --color-text-muted:      #6A6B6C;   /* Captions, meta */

  /* --- Misc --- */
  --color-border-light:    #E6E6E6;
  --color-tag-bg:          #E6E6E6;

  /* --- Typography --- */
  --font-family:           'Nunito', sans-serif;
  --font-size-xs:          14px;
  --font-size-sm:          16px;
  --font-size-base:        19px;
  --font-size-md:          24px;
  --font-size-lg:          30px;
  --font-size-xl:          40px;
  --font-size-2xl:         52px;
  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --line-height-tight:     1.2;
  --line-height-heading:   1.4;
  --line-height-body:      1.58;

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Border Radius --- */
  --radius-sm:   4px;    /* Inputs */
  --radius-md:   5px;    /* Buttons */
  --radius-lg:   12px;   /* Soft buttons, inner cards */
  --radius-xl:   16px;   /* Category tiles */
  --radius-pill: 20px;   /* Tag/date pills */
  --radius-full: 9999px; /* Fully rounded */

  /* --- Shadows --- */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.12);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  /* --- Max Content Width --- */
  --container-max: 1200px;
  --container-pad: 20px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-dark);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-near-black);
}

h1 { font-size: clamp(2rem, 5vw, var(--font-size-2xl)); font-weight: var(--font-weight-extrabold); }
h2 { font-size: clamp(1.6rem, 3vw, var(--font-size-lg)); }
h3 { font-size: clamp(1.3rem, 2.5vw, var(--font-size-md)); font-weight: var(--font-weight-semibold); }
h4 { font-size: 22px; font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-purple-soft); }
h6 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text-dark);
  margin-bottom: var(--space-6);
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-purple-brand); }

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark p,
.on-dark a {
  color: var(--color-text-white);
}

/* ============================================================
   LAYOUT — CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section--sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-topbar {
  background-color: var(--color-purple-deep);
  color: var(--color-text-white);
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
}

.site-topbar a {
  color: var(--color-text-white);
  text-decoration: none;
}

.site-header {
  background-color: var(--color-purple-brand);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-logo {
  color: var(--color-text-white);
  font-family: var(--font-family);
  font-weight: var(--font-weight-extrabold);
  font-size: 28px;
  text-decoration: none;
  line-height: 1.1;
}

.site-logo .logo-the {
  display: block;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.site-nav a {
  color: var(--color-text-white);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: opacity var(--transition-fast);
}

.site-nav a:hover { opacity: 0.85; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary — Orange */
.btn--primary {
  background-color: var(--color-orange-cta);
  color: var(--color-text-white);
  border-radius: var(--radius-md);
  padding: 14px 28px;
}
.btn--primary:hover { background-color: #d4521c; color: var(--color-text-white); }

/* Secondary ghost — on dark backgrounds */
.btn--secondary {