/* =========================================================
   Design tokens — single source of truth for the brand system
   ========================================================= */
:root {
  /* Base */
  --bg:          #000000;
  --bg-soft:     #070709;
  --surface:     #0c0c10;
  --surface-2:   #13131a;
  --surface-3:   #1a1a22;
  --border:      rgba(255,255,255,0.07);
  --border-2:    rgba(255,255,255,0.12);
  --border-3:    rgba(255,255,255,0.22);

  /* Text */
  --text:        #ffffff;
  --text-muted:  rgba(255,255,255,0.62);
  --text-dim:    rgba(255,255,255,0.38);
  --text-ghost:  rgba(255,255,255,0.22);

  /* Brand */
  --green:       #22e07a;
  --green-soft:  rgba(34, 224, 122, 0.16);
  --green-glow:  rgba(34, 224, 122, 0.35);
  --blue:        #2540ff;
  --blue-soft:   rgba(37, 64, 255, 0.16);
  --blue-glow:   rgba(37, 64, 255, 0.38);
  --jade:        #0c4a39;
  --jade-soft:   rgba(12, 74, 57, 0.4);
  --rust:        #4a2a20;
  --rust-soft:   rgba(74, 42, 32, 0.45);
  --navy:        #131438;

  /* Tint map for service accents */
  --tint:        var(--green);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 0 1px var(--border);
  --shadow-sheen: 0 0 40px var(--green-glow);

  /* Motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.64, 0, 0.78, 0);
  --dur-xs: 140ms;
  --dur-sm: 240ms;
  --dur-md: 420ms;
  --dur-lg: 720ms;
  --dur-xl: 1100ms;

  /* Typography */
  --font-display: 'Syne', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Syne Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid */
  --fs-hero:    clamp(52px, 9.2vw, 148px);
  --fs-h1:      clamp(40px, 7vw, 112px);
  --fs-h2:      clamp(34px, 5.2vw, 84px);
  --fs-h3:      clamp(22px, 2.2vw, 32px);
  --fs-body:    clamp(15px, 1.05vw, 17px);
  --fs-small:   13px;
  --fs-eyebrow: 11px;

  /* Layout */
  --page-pad:    clamp(20px, 4vw, 56px);
  --page-max:    1440px;
  --section-gap: clamp(96px, 12vw, 180px);

  /* Logo — centre of the 'O' in 'cove' within the SVG's 1080×1080 box.
     Tweak these to fine-tune the zoom-from-O origin. */
  --logo-o-x: 40.2%;
  --logo-o-y: 47.2%;
}

/* Respect user motion preferences — kill parallax / non-essential animation */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-xs: 0ms; --dur-sm: 0ms; --dur-md: 0ms; --dur-lg: 0ms; --dur-xl: 0ms;
  }
}