/* ============================================================
   CatalyseR design tokens — Direction 2 "Catalyst energy"
   Single source of truth. Spec: docs/superpowers/specs/
   2026-07-10-catalyser-website-revamp-design.md §2
   ============================================================ */

:root {
  /* ---- Color ---- */
  --c-accent: #F97316;        /* hero orange — CTAs, highlights */
  --c-accent-press: #E05E04;  /* darker orange for hover/active */
  --c-accent-soft: #FFE3CC;   /* pale orange chip fill */
  --c-ink: #2A2019;           /* warm dark — body text + headings */
  --c-dark: #6E330A;          /* dark orange — dark section backgrounds (footer, CTA bands) */
  --c-dark-muted: #FEEDE2;    /* secondary text ON dark surfaces — bright, high contrast */
  --c-ink-2: #5A6280;         /* secondary text */
  --c-ink-3: #8F97B8;         /* muted text on dark */
  --c-tint-peach: #FFF3E9;    /* soft section background */
  --c-tint-blue: #EFF2FC;     /* soft section background */
  --c-wa: #25D366;            /* WhatsApp green */
  --c-wa-ink: #0B6E3A;        /* dark green text on light green */
  --c-wa-bg: #DCF8E7;         /* light green chip fill */
  --ground: #FFFFFF;          /* page background */
  --c-line: #E4E8F3;          /* hairline borders */
  --c-line-strong: #C9D0E4;   /* form field borders */
  --c-focus: rgba(249, 115, 22, .28); /* focus ring */
  --c-accent-glow: rgba(249, 115, 22, .26); /* accent button glow / hero tint (theme-follows) */

  /* ---- Radius ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---- Type ----
     Plus Jakarta Sans woff2 self-hosting lands later; until then the
     system stack must carry the look. Do NOT link Google Fonts CDN. */
  --font: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Arial, sans-serif;
  --fw-regular: 400;
  --fw-semi: 600;
  --fw-heavy: 800;

  /* Type scale (mobile-first, fluid) */
  --fs-h1: clamp(30px, 6vw, 52px);
  --fs-h2: clamp(24px, 4.2vw, 36px);
  --fs-h3: clamp(19px, 2.6vw, 24px);
  --fs-h4: clamp(16px, 2vw, 18px);
  --fs-lead: clamp(17px, 2.4vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12.5px;
  --lh-tight: 1.12;
  --lh-body: 1.65;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --section-y: clamp(60px, 9vw, 112px);  /* vertical rhythm of .section — roomier */
  --gutter: clamp(16px, 3.5vw, 56px);    /* container side padding */
  --container: 100%;                     /* full page width */

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(30, 39, 73, .05), 0 8px 24px rgba(30, 39, 73, .08);
  --shadow-pop: 0 4px 10px rgba(30, 39, 73, .10), 0 16px 40px rgba(30, 39, 73, .16);

  /* ---- Motion (150-250ms only; no decorative animation) ---- */
  --speed: 180ms;
  --speed-slow: 240ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Layers ---- */
  --z-nav: 50;
  --z-sticky: 60;
}