/* =====================================================
   heka — design tokens (V2.1 redesign)
   Source of truth. Loaded before style.css.
   ===================================================== */

:root {
  /* ---------- COLOUR ---------- */

  /* Reef — primary brand colour. CTAs, hero panels.
     Target ~11% of any surface. */
  --reef:              #0F3E48;
  --reef-90:           #1A4A55;
  --reef-10:           #E2E9EB;

  /* Bone — primary background. ~70% of any surface. */
  --bone:              #EFEAE0;
  --bone-warm:         #FAF7F4;

  /* Ink — text. Warm-shifted near-black. ~15% of any surface. */
  --ink:               #0F0F10;
  --ink-70:            #3A3A3B;

  /* Mist — captions, dividers, disabled. ~2.5% of any surface. */
  --mist:              #B7BCBE;

  /* Tonic Mint — SIGNAL ONLY. Never CTA, never hero ground.
     Never type on Bone (fails AA). Max 2% of any surface,
     one moment per page. See HANDOFF §6. */
  --mint:              #14E29C;
  --mint-deep:         #0EAB75;

  /* Hairlines — only permitted graphic element on Bone. */
  --hairline:          rgba(15, 15, 16, 0.10);
  --hairline-strong:   rgba(15, 15, 16, 0.20);

  /* ---------- TYPE ---------- */

  --font-sans:         "Inter", -apple-system, BlinkMacSystemFont,
                       "Helvetica Neue", sans-serif;
  --font-serif-italic: Georgia, "Times New Roman", serif;
  /* Georgia Italic — pull quotes / testimonials only. */

  /* Type scale */
  --fs-display-xl:     56px;
  --fs-display-l:      44px;
  --fs-display-m:      36px;
  --fs-display-s:      32px;
  --fs-h-s:            24px;
  --fs-stat:           56px;
  --fs-stat-unit:      22px;
  --fs-lede:           17px;
  --fs-body:           16px;
  --fs-body-sm:        15px;
  --fs-meta:           14px;
  --fs-eyebrow:        11px;
  --fs-tag:            10px;

  /* Weights — Inter only */
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-black:          900;

  /* Letter-spacing */
  --ls-display:        -0.035em;
  --ls-h:              -0.025em;
  --ls-stat:           -0.04em;
  --ls-eyebrow:        0.14em;
  --ls-tag:            0.16em;
  --ls-meta:           0.10em;

  /* Line-heights */
  --lh-tight:          1.0;
  --lh-display:        1.0;
  --lh-heading:        1.15;
  --lh-body:           1.5;
  --lh-prose:          1.55;

  /* ---------- SPACING ---------- */
  --sp-1:              4px;
  --sp-2:              8px;
  --sp-3:              12px;
  --sp-4:              16px;
  --sp-5:              22px;
  --sp-6:              28px;
  --sp-7:              36px;
  --sp-8:              44px;
  --sp-9:              56px;
  --sp-10:             64px;

  /* ---------- RADII ---------- */
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         14px;
  --radius-pill:       999px;

  /* ---------- HEIGHTS ---------- */
  --h-button:          48px;
  --h-button-sm:       40px;
  --h-funnel-bar:      3px;
  --h-status-bar:      44px;
  --h-topbar:          56px;
  --h-sticky-cta:      64px;

  /* Single source of truth for the heka wordmark height across the
     topbar, sticky topbar, and footer. 44px on mobile, growing to
     48px on desktop. Used everywhere the logo appears in chrome
     (not the landing-hero mark). */
  --logo-height:       clamp(44px, calc(0.4vw + 41px), 48px);

  /* Editorial page widths used by /heka, /products, /spf, /privacy.
     One narrow column for body-heavy editorial, one wider for cards
     and tables. Keep all section inners pinned to one of these. */
  --content-narrow:    880px;
  --content-wide:      1100px;

  /* Single source of truth for horizontal page padding. Below the
     1100px breakpoint it scales fluidly (20-56px gutter). At wider
     viewports it switches to centering math so the page content
     always sits inside a 1100px column. Apply via:
       padding-left: var(--page-gutter);
       padding-right: var(--page-gutter);
     ...to the topbar, footer, and every section that wants its
     content edges to line up with the rest of the site. */
  --page-gutter:       max(clamp(20px, 4vw, 56px), calc((100vw - 1100px) / 2));

  /* ---------- MOTION ---------- */
  --ease-out:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:          200ms;
  --dur-base:          320ms;
  --dur-slow:          800ms;
}