/* PowerShare 2 - design tokens
   Single source of truth for colour, spacing, type, radii, shadows and focus.
   Component CSS must reference these custom properties - never raw hex. */

:root {
  /* ── Brand palette (People's Powerhouse) ─────────────────────────────── */
  --colour-brand:        #2D6A4F;  /* primary green */
  --colour-brand-dark:   #1B4332;  /* deep green - headings, footer, hero */
  --colour-brand-light:  #52B788;  /* light green - accents, active states */
  --colour-brand-pale:   #B7E4C7;  /* pale green - subtle fills, chips */
  --colour-bg:           #EAF6EE;  /* app background */
  --colour-surface:      #FFFFFF;  /* cards, tiles, forms */
  --colour-surface-alt:  #F4FAF6;  /* alternate card fill, table stripes */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --colour-text:         #1E2D26;
  --colour-text-muted:   #5B6E64;
  --colour-text-invert:  #FFFFFF;
  --colour-link:         var(--colour-brand);
  --colour-border:       #D4E5DA;
  --colour-border-strong:#A9C7B4;

  /* ── Semantic colours ────────────────────────────────────────────────── */
  --colour-success:      #2D6A4F;
  --colour-success-bg:   #DCF2E4;
  --colour-warn:         #7A5500; /* darkened from #9A6B00 - that shade only hit 4.28:1 against --colour-warn-bg, below WCAG AA 4.5:1 */
  --colour-warn-bg:      #FFF4D6;
  --colour-danger:       #B3261E;
  --colour-danger-bg:    #FBE9E7;
  --colour-info:         #1A5B7A;
  --colour-info-bg:      #E2F1F8;

  /* ── Party colour token (set from JS per representative) ────────────── */
  /* Documented exception: js/core/stack.js sets this via
     el.style.setProperty("--party-colour", ...) so party accents stay
     data-driven without hardcoded inline styles. */
  --party-colour:        #2C3E50;

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(27, 67, 50, 0.08);
  --shadow-md: 0 2px 8px rgba(27, 67, 50, 0.10);
  --shadow-lg: 0 8px 24px rgba(27, 67, 50, 0.14);

  /* ── Type scale (mobile-first) ───────────────────────────────────────── */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-body:  1.55;

  /* ── Focus ring ──────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(82, 183, 136, 0.55);
  --focus-ring-colour: var(--colour-brand-light);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --content-max: 60rem;
  --nav-height: 3.75rem;
}