/* ─────────────────────────────────────────────
   COMMVIO — Design Tokens (Apple-like)
   ───────────────────────────────────────────── */

:root {
  /* ── Colours ── */
  --c-bg:        #FFFFFF;
  --c-surface:   #F5F5F7;
  --c-text:      #0B0D10;
  --c-subtext:   rgba(11,13,16,0.72);
  --c-border:    rgba(11,13,16,0.10);
  --c-accent:    #0071E3;
  --c-accent-hover: #0066CC;
  --c-white:     #FFFFFF;
  --c-success:   #30D158;
  --c-error:     #FF3B30;

  /* ── Typography ── */
  --ff: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --fs-hero:   clamp(2.75rem, 6vw, 5rem);
  --fs-h1:     clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2:     clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:     clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-pill:   0.8125rem;
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-body:   1.6;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --ls-tight:  -0.025em;
  --ls-normal:  0;

  /* ── Spacing (8px grid) ── */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  2.5rem;    /* 40 */
  --sp-8:  3rem;      /* 48 */
  --sp-9:  4rem;      /* 64 */
  --sp-10: 5rem;      /* 80 */
  --sp-section: 6rem; /* 96 desktop */

  /* ── Radius ── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 10px 30px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.12);
  --shadow-card:0 4px 20px rgba(0,0,0,0.08);

  /* ── Transitions ── */
  --ease:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur:      300ms;
  --dur-slow: 500ms;

  /* ── Layout ── */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter:    clamp(1.25rem, 4vw, 3rem);
}

@media (max-width: 768px) {
  :root {
    --sp-section: 3.5rem; /* 56px mobile */
  }
}

/* Reduced-motion global */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}