/* ==========================================================================
   Unlease — design tokens
   Colour rules (WCAG 2.2 AA, measured on the actual pairs):
   - las on kreda 13.3:1, las on white 14.7:1           -> main text, dark panels, primary buttons
   - las-70 on kreda 5.4:1                               -> secondary text (las-50 is decoration only, 3.0:1)
   - zielen on kreda 4.9:1, on white 5.4:1               -> links, second-level accents, icons
   - mieta: accents only. Never text on light (1.6:1). On las it reads 8.3:1 (highlighted word, CTA on dark)
   - field border on white 3.6:1 (UI component >= 3:1)
   - colour works in blocks (rounded section panels), not gradients
   ========================================================================== */
:root {
  /* brand */
  --c-las: #0A2E24;
  --c-zielen: #0B7A53;
  --c-mieta: #3DDC97;
  --c-kreda: #F5F4EF;
  --c-bialy: #FFFFFF;

  /* derived */
  --c-las-70: #516961;      /* secondary text on kreda / white */
  --c-las-50: #80918A;      /* decoration only */
  --c-las-hover: #0A4130;   /* primary button hover (kreda text 10.5:1) */
  --c-las-raised: #1E3F36;  /* card on a las panel */
  --c-kreda-72: #B3BDB6;    /* secondary text on las (7.6:1) */
  --c-mieta-14: #DBF1E3;    /* highlight background on light */
  --c-mieta-22: #CDEFDC;    /* light mint panel */
  --c-mieta-hover: #5AE1A7; /* mint button hover (las text 8.9:1) */
  --c-line: #D9DCD7;        /* hairlines and card borders (decoration) */
  --c-field: #788C87;       /* form field borders (3.6:1 on white) */
  --c-error: #B42318;
  --c-error-bg: #FDECEA;

  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);     /* 40 -> 72 px */
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem); /* 17 -> 18 px */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --track-tight: -0.02em;

  /* shape: images and illustrations use the same radius as section panels */
  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-pill: 999px;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4rem, 2.8rem + 5vw, 8rem);
  --container: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --panel-inset: clamp(0.5rem, 1.6vw, 1.5rem);
  --header-h: 4.25rem;

  /* depth */
  --sh-card: 0 1px 2px rgba(10, 46, 36, 0.06), 0 14px 34px -18px rgba(10, 46, 36, 0.28);
  --sh-pop: 0 2px 6px rgba(10, 46, 36, 0.08), 0 24px 48px -20px rgba(10, 46, 36, 0.35);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t: 260ms;

  --focus: var(--c-las);
}

@media (min-width: 768px) {
  :root {
    --r-xl: 32px;
    --header-h: 4.75rem;
  }
}