/* ==========================================================================
   TeamTrek V3 — Design tokens
   One system for the whole site. Every section pulls colour, type, spacing,
   radius, shadow and motion from here — nothing is hard-coded per section.
   ========================================================================== */

:root {
  /* ---- Brand (teal) ---------------------------------------------------- */
  --primary-50:  #EEF9F7;
  --primary-100: #DFF3F0;
  --primary-200: #B3E6DF;
  --primary-300: #66CFC4;
  --primary-400: #20B7A6;
  --primary-500: #00A98F;
  --primary-600: #048F82;
  --primary-700: #007A70;
  --primary-800: #00665D;
  --primary-900: #004C46;

  /* ---- Neutrals (green-tinted greys) ---------------------------------- */
  --neutral-25:  #FBFCFC;
  --neutral-50:  #F8FAFA;
  --neutral-100: #F3F5F6;
  --neutral-150: #EEF1F2;
  --neutral-200: #E5E9EA;
  --neutral-300: #D6DDDE;
  --neutral-400: #AAB5B7;
  --neutral-500: #7C898B;
  --neutral-600: #657476;
  --neutral-700: #455658;
  --neutral-800: #26393A;
  --neutral-900: #102A2A;
  --neutral-950: #071B1A;

  /* Dark surface used by "How it works" and the footer */
  --ink-900: #12201F;
  --ink-800: #1A2B29;
  --ink-700: #243937;
  --ink-line: #2C4341;

  /* ---- Semantic -------------------------------------------------------- */
  --success-tint: #DCFCE7; --success-fill: #22C55E; --success-text: #15803D;
  --warning-tint: #FEF9C3; --warning-fill: #EAB308; --warning-text: #854D0E;
  --danger-tint:  #FEE2E2; --danger-fill:  #EF4444; --danger-text:  #B91C1C;

  /* ---- Type ------------------------------------------------------------ */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-display:  clamp(2.5rem, 4.6vw + 1rem, 4.5rem);   /* hero h1 */
  --text-display-2:clamp(2.125rem, 3.4vw + 1rem, 3.5rem); /* CTA panel */
  --text-h2:       clamp(1.75rem, 2.4vw + .75rem, 3rem);
  --text-h3:       clamp(1.375rem, 1.2vw + .75rem, 1.875rem);
  --text-h4:       clamp(1.125rem, .6vw + .75rem, 1.375rem);
  --text-body-lg:  clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  --text-body:     1rem;
  --text-sm:       .875rem;
  --text-xs:       .8125rem;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-x: 800;

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation (tinted with the brand near-black) -------------------- */
  --shadow-01: 0 1px 2px rgba(16,42,42,.05);
  --shadow-02: 0 4px 12px rgba(16,42,42,.06);
  --shadow-03: 0 12px 32px rgba(16,42,42,.08);
  --shadow-04: 0 32px 64px -12px rgba(16,42,42,.14);
  --shadow-hero: 0 48px 96px -24px rgba(16,42,42,.18);
  --shadow-brand: 0 12px 32px rgba(4,143,130,.18);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 1.25rem;
  --header-h: 76px;
  --header-h-scrolled: 64px;
  --scroll-offset: 84px;

  --section-y: clamp(4rem, 7vw, 7rem);
  --section-y-lg: clamp(5rem, 9vw, 8.5rem);

  /* ---- Motion — one signature curve across the whole site -------------- */
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: .18s;   /* hover, focus, colour */
  --dur-ui: .32s;      /* tabs, panels, menus */
  --dur-reveal: .56s;  /* section reveal */
  --dur-figure: .8s;   /* large visual transitions */

  /* ---- Decorative ------------------------------------------------------ */
  --grid-line: rgba(214, 221, 222, .4);
  --brand-gradient: linear-gradient(135deg, #00665D 0%, #048F82 52%, #00A98F 100%);
  --ambient: radial-gradient(120% 90% at 50% -10%, #E6F5F2 0%, #F8FAFA 46%, #FFFFFF 100%);
}