/* design_intelligence · foundation.css — direction-AGNOSTIC premium layer.
 * Import this once, then ONE direction-*.css for the colour/type identity.
 * Everything here is grounded in award-tier references (Vercel Web Interface
 * Guidelines, Emil Kowalski / animations.dev, Stripe·Linear·Vercel teardown).
 * These values are the "material" the website-design-team pipeline was missing:
 * premium motion + interaction + a11y that an LLM otherwise reinvents as slop.
 * ------------------------------------------------------------------------- */

:root {
  /* — SPACING — 4px base grid; use these, never arbitrary px (AI-sprawl tell). */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;
  /* Section rhythm: TIGHT inside a group, GENEROUS between groups.
     Premium sections breathe — vary density, don't py-20 everything. */
  --section-y: clamp(64px, 10vw, 128px);
  --section-sm: clamp(48px, 7vw, 96px);
  --container: 1120px;        /* content max-width (Linear/Stripe ~1100-1200) */
  --page-pad: clamp(20px, 5vw, 64px); /* side gutter; NEVER 0 on mobile */
  --measure: 68ch;            /* body line-length cap; never let prose run wide */

  /* — RADII — pick a consistent scale; over-rounding small cards is a tell. */
  --radius-xs: 6px;   --radius-sm: 8px;   --radius-md: 12px;
  --radius-lg: 16px;  --radius-pill: 999px;

  /* — MOTION durations — premium is FAST. Keep all UI motion < 300ms. */
  --dur-fast: 120ms;    /* hover / color / active press */
  --dur-base: 200ms;    /* dropdown / tooltip / small reveal */
  --dur-slow: 280ms;    /* modal / sheet entrance (ceiling for UI) */

  /* — EASING — ease-OUT for user-initiated enter/exit; never ease-in on UI,
       never linear except loops. out-quint is the go-to UI curve. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* out-quint */
  --ease-out-soft: cubic-bezier(0.19, 1, 0.22, 1);   /* out-expo, gentler */
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1);/* on-screen movement */

  /* — FOCUS ring — real, visible, keyboard-only (see :focus-visible below). */
  --focus-w: 2px;
  --focus-offset: 2px;
}

/* — BASE reset (minimal, premium defaults) — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* — INTERACTION primitives — six states, subtle deltas (NOT scale-1.05+glow). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; line-height: 1.15; cursor: pointer; border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }        /* tactile "it responded" */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

/* Hover only where a real pointer exists — avoids stuck hover on touch. */
@media (hover: hover) and (pointer: fine) {
  .link-underline { background-size: 0 1px; transition: background-size var(--dur-base) var(--ease-out); }
  .card--interactive { transition: transform var(--dur-base) var(--ease-out),
                                   border-color var(--dur-base) var(--ease-out),
                                   box-shadow var(--dur-base) var(--ease-out); }
  .card--interactive:hover { transform: translateY(-2px); }  /* -1 to -2px, never -8 */
}

/* Keyboard-visible focus ring (not on mouse click). */
:focus-visible {
  outline: var(--focus-w) solid var(--focus, currentColor);
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* Adequate touch targets, no double-tap zoom, no iOS input auto-zoom. */
.btn, a[role="button"], [data-touch] { touch-action: manipulation; min-height: 44px; }
input, textarea, select { font-size: 16px; }

/* — REVEAL — happens ONCE, only for key blocks; opacity + small translateY, no bounce. */
.reveal { opacity: 0; transform: translateY(12px);
          transition: opacity var(--dur-slow) var(--ease-out),
                      transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* no-JS safety net: .reveal hides content and relies on JS (.is-in) to reveal it.
   If scripting is off, everything below the fold stays opacity:0 = invisible.
   Restore visibility when the UA won't run scripts (does NOT fire in a JS browser
   whose observer failed — that's a code bug, not a default a11y hole).
   NOTE for builders: the (scripting:none) feature only exists in Chrome/Edge 120+,
   FF 113+, Safari 17+. On OLDER no-JS UAs (iOS 16, old Android WebViews, in-app
   browsers) it is unknown -> evaluates false -> below-fold .reveal stays invisible.
   If you use .reveal below the fold, ALSO add the universally-supported no-JS belt
   in the document head (a noscript style block that resets .reveal to opacity:1) —
   the exact pasteable snippet is in DECISION_RULES.md section 4 (Motion). Never write
   a closing style tag inside any CSS file: once inlined it would terminate the enclosing
   style element in a real browser and blank the page (self-test guards this). */
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

/* — reduced-motion: drop translate/scale, keep gentle fades; no !important. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms; animation-iteration-count: 1;
    transition-duration: 0.01ms; scroll-behavior: auto;
  }
  .reveal { transform: none; }
}

/* — TYPE-SETTING classes — the four levers that separate pro from amateur:
     line-height tightens as size grows · tracking negative on display, positive
     on eyebrows · body capped to a measure · weight 400 body / 500 UI / 600 head.
     A direction-*.css supplies the --fs-* sizes and --font-* families; these
     classes apply the craft. (grounded: Linear/Stripe/Vercel type teardown.) */
body { font-family: var(--font-body, system-ui, sans-serif);
       font-size: var(--fs-body, 1rem); line-height: 1.6;
       letter-spacing: -0.006em; }
.display { font-family: var(--font-display, var(--font-body));
           font-size: var(--fs-display); font-weight: 600;
           line-height: 1.04; letter-spacing: -0.035em;
           text-wrap: balance; max-width: 18ch; }
.h1 { font-family: var(--font-display, var(--font-body));
      font-size: var(--fs-h1); font-weight: 600;
      line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-family: var(--font-display, var(--font-body));
      font-size: var(--fs-h2); font-weight: 600;
      line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600;
      line-height: 1.25; letter-spacing: -0.015em; }
.lead { font-size: var(--fs-lead); font-weight: 400;
        line-height: 1.5; letter-spacing: -0.01em; max-width: 46ch; }
.body { font-size: var(--fs-body); font-weight: 400;
        line-height: 1.6; max-width: var(--measure); text-wrap: pretty; }
.ui { font-weight: 500; letter-spacing: -0.01em; }        /* nav / buttons: 500 not 400 */
.eyebrow { font-size: var(--fs-caption, 0.8125rem); font-weight: 500;
           letter-spacing: 0.08em; text-transform: uppercase; }
.tabular { font-variant-numeric: tabular-nums; }          /* aligned stats/pricing */
/* Heading rhythm: more space ABOVE than below binds a heading to its paragraph. */
.prose h2 { margin: 2.5em 0 0.75em; }
.prose h3 { margin: 2em 0 0.5em; }
.prose p  { margin: 0 0 1.25em; }