/* ==========================================================================
   Gigify design tokens
   Brand values are taken from the live gigwork.mt stylesheet (green #51BA6C,
   dark green #30975D, ink #18251B, tint #EDF8F0). Replace the BRAND block with
   official values if they differ; everything else follows.
   Font: gigwork.mt uses "General Sans". It is not bundled (licence and
   self-hosting not confirmed), so the system stack is used. To use it, add the
   licensed woff2 files to assets/fonts/, declare @font-face in this file and put
   the family first in --font-sans.
   Media-query breakpoints cannot use custom properties. The site uses:
   640px, 768px, 1024px, 1280px and 1360px (full desktop header).
   ========================================================================== */

:root {
  /* ---- BRAND (swap in official values here) ---- */
  --gg-forest: #18251B;            /* ink: text, dark cards, footer */
  --gg-green: #51BA6C;             /* primary brand green */
  --gg-mint: #E1F1E6;              /* hover and control backgrounds */
  --gg-white: #FFFFFF;
  --gg-ink: #18251B;               /* primary button fill */
  --gg-line: #E3E3E3;

  /* ---- Derived colours (checked for WCAG AA contrast) ---- */
  --gg-tint: #EDF8F0;              /* pale green section band (gigwork.mt) */
  --gg-mint-light: var(--gg-tint);
  --gg-green-dark: #30975D;        /* brand dark green (large text and fills only) */
  --gg-green-deep: #1F7A45;        /* green for small text and icons on light (5.3:1 on white) */
  --gg-green-hover: #46A862;
  --gg-forest-hover: #3A3A3A;
  --gg-text-muted: #50555D;        /* muted text on white and tint */
  --gg-input-border: #767676;      /* 4.5:1 on white */
  --gg-placeholder: #E6E6E6;       /* neutral grey for missing real assets */
  --gg-placeholder-edge: #8A8A8A;
  --gg-placeholder-dark: #6E6E6E;
  --gg-overlay: rgba(24, 37, 27, 0.72);
  /* gigwork.mt sets white text on #51BA6C (2.4:1, fails WCAG AA). Ink is used instead.
     To match the live site exactly, set this to #FFFFFF (and accept the contrast failure). */
  --gg-on-green: var(--gg-ink);
  --gg-error: #A3261A;

  /* ---- Semantic roles ---- */
  --color-bg: var(--gg-white);
  --color-surface: var(--gg-white);
  --color-text: var(--gg-forest);
  --color-text-muted: var(--gg-text-muted);
  --color-line: var(--gg-line);
  --color-accent: var(--gg-green);
  --color-on-accent: var(--gg-on-green);
  --color-focus: var(--gg-ink);
  --eyebrow-color: var(--gg-green-deep);

  /* ---- Typography ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-statement: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem);
  --lh-body: 1.5;
  --lh-tight: 1.1;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(4rem, 3rem + 4vw, 6rem);   /* 64px to 96px */

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

  /* ---- Layout ---- */
  --container: 76rem;
  --container-wide: 90rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --tap: 2.75rem;                  /* 44px minimum tap target */
  --header-h: 7.5rem;              /* scroll offset; reduced at 768px+ in base.css */

  /* ---- Effects ---- */
  --shadow-card: 0 10px 30px rgba(24, 37, 27, 0.1);
  --shadow-header: 0 6px 20px rgba(24, 37, 27, 0.1);
  --ease: 180ms ease;
}