/* Cuttl marketing site: design tokens v2. Spec: site/DESIGN.md */
:root {
  /* Neutrals */
  --white: #ffffff;
  --bone: #fafdff;
  --mist: #f9fafb;
  --fog-card: #fcfcfd;
  --sky: #ebf5ff;
  --ink: #0a0d12;
  --charcoal: #181d27;
  --charcoal-hover: #262c39;
  --graphite: #535862;
  --fog: #93979f;
  --hairline: #f4f5f6;

  /* Accent + pastels */
  --iris: #0069e0;
  --iris-bright: #2f8bff;
  --iris-gradient: linear-gradient(#479dff 11.43%, #0069e0 78.2%);
  --powder: #cce7ff;
  --lavender: #f1e6ff;
  --mint: #d3f6e3;
  --solar: #fff2be;
  --peach: #ffd1b8;
  --peach-wash: #fff3ec;
  --lilac-wash: #f9f5ff;

  /* Section washes (measured from reference) */
  --wash-sky: linear-gradient(#fff -8%, #fafdff 27%, #e1f1ff 89%, #f5faff 110%);
  --wash-lilac: linear-gradient(#fff, #f9f5ff 52%, #fff);
  --wash-footer: linear-gradient(#fff 7%, #d6ecff 55%, #fff);

  /* Type */
  --display: "General Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
  --ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-giant: clamp(72px, 10.3vw, 148px);
  --t-statement: clamp(40px, 5vw, 72px);
  --t-h1: clamp(36px, 3.4vw, 48px);
  --t-h3: clamp(26px, 2.3vw, 32px);
  --t-card: 20px;
  --t-sub: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;

  /* Space (8px base) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px;
  --s-7: 56px; --s-8: 64px; --s-10: 80px; --s-15: 120px; --s-20: 160px;
  --page-max: 1200px;
  --gutter: clamp(16px, 2.5vw, 24px);
  --section-gap: clamp(80px, 10vw, 160px);

  /* Shape */
  --r-panel: 24px;
  --r-card: 32px;
  --r-btn-sm: 16px;
  --r-pill: 9999px;

  /* Elevation: only these two exist */
  --shadow-frame: 0 14px 20px 4px rgba(4, 69, 144, .08);
  --shadow-pill: inset 0 4px 2px rgba(255, 255, 255, .22), 0 1px 2px rgba(10, 13, 18, .5);
  --focus: 0 0 0 3px color-mix(in srgb, var(--iris) 45%, transparent);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* Spring with a small overshoot, written as a linear() curve */
  --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --d-1: .3s;
  --d-2: .65s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0s; --d-2: 0s; }
}