/* ==========================================================================
   CoopEast Design Tokens
   Single source of truth for the entire design system.
   ========================================================================== */

:root {
  /* ----- Brand color ----- */
  --clr-primary: #0a6e3d;        /* CoopEast green */
  --clr-primary-dark: #085531;   /* hover / pressed */
  --clr-primary-deep: #06432a;   /* top bar, dark surfaces */
  --clr-primary-tint: #e9f4ee;   /* subtle green wash */

  /* ----- Accent (CTAs only) ----- */
  --clr-accent: #e9a13b;         /* warm gold */
  --clr-accent-dark: #d68f27;

  /* ----- Neutrals ----- */
  --clr-white: #ffffff;
  --clr-surface: #f5f7f6;        /* light grey section background */
  --clr-border: #e3e8e5;
  --clr-ink: #1c2620;            /* headings */
  --clr-text: #3c4942;           /* body */
  --clr-muted: #67746d;          /* secondary text */

  /* ----- Typography ----- */
  --ff-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
  --fw-regular: 400;             /* body */
  --fw-medium: 500;              /* labels */
  --fw-semibold: 600;            /* navigation */
  --fw-bold: 700;                /* headings */

  /* ----- Spacing scale (4px base) ----- */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs: 0.5rem;     /*  8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4.5rem;    /* 72px */
  --space-4xl: 6rem;      /* 96px */

  /* ----- Layout ----- */
  --container-max: 75rem;        /* 1200px */
  --container-pad: clamp(1rem, 4vw, 2rem);
  --topbar-h: 2.625rem;          /* 42px */
  --nav-h: 5.25rem;              /* 84px desktop */

  /* ----- Shape & elevation ----- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(16, 33, 24, 0.06);
  --shadow-md: 0 12px 32px -8px rgba(16, 33, 24, 0.18);

  /* ----- Motion ----- */
  --transition: 200ms ease;

  /* ----- Layers ----- */
  --z-header: 100;
}