/* ============================================================
   tokens.css — design tokens (single source of truth)
   Values extracted from the old Framer build. See docs/DESIGN-TOKENS.md.
   ============================================================ */

:root {
  /* ---------- Colors ---------- */
  --c-primary:        #3c787e;              /* brand color → all buttons/CTAs */
  --c-primary-hover:  #336a6f;              /* button hover */
  --c-accent:         #c7ef00;              /* green → active states, nav highlight, active-section bg */
  --c-ink:            #1e3e45;              /* rgb(30,62,69) — text, headings, logo, mobile menu bg */
  --c-primary-soft:   rgba(60,120,125,.63); /* primary, reduced opacity — borders/fills */
  --c-primary-tint:   #d6e8e9;              /* rgb(214,232,233) — card/surface tint */
  --c-bg:             #ebf2f2;              /* page background */
  --c-surface:        #f7fcfc;              /* near-white surface */
  --c-muted:          #76898d;              /* rgb(118,137,141) — secondary text */
  --c-muted-2:        #70858a;              /* rgb(112,133,138) — muted variant */
  --c-white:          #ffffff;
  --c-overlay:        rgba(16,21,26,.72);   /* project modal backdrop */

  /* on-color text helpers */
  --c-on-primary:     #ffffff;
  --c-on-accent:      #1e3e45;

  /* ---------- Fonts ---------- */
  --f-display: 'Stretch Pro Regular', 'Stretch Pro', sans-serif; /* logo, big display */
  --f-decor:   'Designer Regular', sans-serif;                    /* decorative accent */
  --f-body:    'Satoshi', system-ui, -apple-system, sans-serif;   /* body, nav, UI */
  --f-alt:     'Montserrat', sans-serif;                          /* minor */

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Font sizes ---------- */
  --fs-nav:   14px;                       /* nav item (fixed) */
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-tag:   13px;
  --fs-logo:  clamp(20px, 2.2vw, 26px);
  --fs-h3:    clamp(20px, 2.4vw, 28px);
  --fs-h2:    clamp(28px, 4vw, 44px);
  --fs-hero:  58px;                       /* hero rotating words (52px on phone via base.css) */
  --fs-pill:  clamp(13px, 3.4vw, 21px);

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --ls-nav:   .06em;                      /* nav letter-spacing */

  /* ---------- Spacing scale (4px rhythm) ---------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  /* ---------- Semantic spacing ---------- */
  --gap-eyebrow-title: var(--space-xs);   /* eyebrow/tag → heading (12px) */
  --gap-title-text:    var(--space-sm);   /* heading → paragraph (16px) */
  --gap-text-cta:      var(--space-md);   /* paragraph → button (24px) */
  --gap-stack:         var(--space-md);   /* default vertical stack gap (24px) */
  --gap-cards:         var(--space-lg);   /* between project/step cards (40px) */
  --pad-section:       clamp(40px, 6vw, 80px); /* section vertical padding */
  --pad-card:          var(--space-md);   /* card/pill inner padding (24px) */

  /* ---------- Layout ---------- */
  --gutter:  clamp(20px, 5vw, 64px);      /* page side padding */
  --maxw:    1200px;                      /* max content width */
  --nav-h:   64px;                        /* desktop header height */
  --nav-gap: clamp(18px, 3vw, 42px);      /* gap between nav links */

  /* ---------- Radius ---------- */
  --r-pill: 999px;
  --r-md:   16px;
  --r-sm:   8px;
  --r-xs:   4px;   /* smallest radius in the system */

  /* ---------- Effects ---------- */
  --blur-nav:    blur(12px);
  --bg-header:   rgba(235,242,242,.82);
  --border-header: 1px solid rgba(30,62,69,.10);
  --shadow-card: 0 8px 30px rgba(30,62,69,.08);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.32, .72, .28, 1);
  --dur-fast:   .25s;
  --dur-mid:    .45s;
  --dur-slow:   .7s;

  /* ---------- Breakpoints (reference; media queries can't use vars) ----------
     desktop:  min-width: 810px
     reflow:   max-width: 1279.98px
     phone:    max-width: 809.98px
  */
}