/* Apex Agency — space, radius, shadow, motion.
   Values transcribed verbatim from the .fig; the file is NOT on a 4/8 grid. */
:root {
  /* ── Canvas ────────────────────────────────────────────────────────────── */
  --page-width: 1440px;
  --nav-height: 76px;
  --gutter-nav: 68px;      /* nav horizontal padding */
  --gutter-page: 80px;     /* every content band */
  --gutter-case: 78px;     /* case-study title band */
  --gutter-footer-bar: 100px;
  --content-max: 1248px;   /* Our Services inner column */
  --grid-max: 1280px;      /* Selected work gallery */

  /* ── Space steps actually used ─────────────────────────────────────────── */
  --space-1: 2px;   --space-2: 4px;   --space-3: 8px;   --space-4: 10px;
  --space-5: 12px;  --space-6: 16px;  --space-7: 19px;  --space-8: 24px;
  --space-9: 28px;  --space-10: 32px; --space-11: 40px; --space-12: 44px;
  --space-13: 48px; --space-14: 53px; --space-15: 56px; --space-16: 59px;
  --space-17: 64px; --space-18: 68px; --space-19: 76px; --space-20: 90px;
  --space-21: 95px; --space-22: 100px; --space-23: 108px; --space-24: 120px;

  /* Section vertical rhythm */
  --band-pad-sm: 50px;
  --band-pad: 84px;
  --band-pad-lg: 100px;
  --band-pad-xl: 110px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-hairline: 2px;   /* service card */
  --radius-check: 4px;
  --radius-panel: 8px;      /* select list */
  --radius-field: 12px;     /* every input, select, form panel */
  --radius-icon-tile: 23px; /* service icon tile */
  --radius-social: 100px;   /* social icon button */
  --radius-pill: 900px;     /* every button and pill */
  --radius-round: 50%;

  /* ── Control sizes ─────────────────────────────────────────────────────── */
  --control-h-sm: 36px;     /* text field */
  --control-h: 40px;        /* pill button, select */
  --control-h-lg: 54px;     /* primary button */
  --social-size: 44px;
  --icon-tile: 64px;
  --cta-disc: 151px;

  /* ── Shadow ────────────────────────────────────────────────────────────── */
  --shadow-specimen: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
  --shadow-panel: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  --shadow-cta-disc: -1.857px 8.045px 12.377px 0px rgba(45, 50, 158, 0.47);
  --shadow-focus: 0px 0px 0px 4px rgba(73, 151, 243, 0.2);

  /* Borders are drawn as INSET box-shadows in the source, never `border`,
     so they never affect layout. */
  --hairline-nav: inset 0 0 0 1px var(--neutral-100);
  --hairline-field: inset 0 0 0 1px var(--neutral-200);
  --hairline-strong: inset 0 0 0 1px var(--apex-black);
  --hairline-inverse: inset 0 0 0 1px var(--neutral-400);
  --hairline-lib: inset 0 0 0 1px var(--lib-border);

  /* ── Motion (not specified in the file — house default, see readme) ───── */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
}