/*
 * Design tokens.
 *
 * Colours are stored as they are *displayed*, not as they were authored in
 * Webflow. The original site applied `filter: saturate(1.08) contrast(1.03)`
 * to <html>, so every colour rendered transformed; dropping that filter means
 * baking the transform into the values. `scripts/bake-filter.mjs` computes it
 * and can re-check any value.
 *
 * The Webflow stylesheet declared 45 custom properties but referenced only 21,
 * most of them stock palette entries the design never touched. This is the set
 * the design actually uses.
 */
:root {
  /* Core palette */
  --color-ink: #000000;          /* body text                    (authored #000)     */
  --color-paper: #ffffff;        /* light surfaces               (authored #fff)     */
  --color-cream: #f3f3ec;        /* section backgrounds          (authored #f0f0e9)  */
  --color-charcoal: #171616;     /* dark surfaces                (authored #1a1919)  */

  /* Brand greens */
  --color-green: #d6ff62;        /* bright accent                (authored #d5ff6d)  */
  --color-green-deep: #045542;   /* buttons, contact panel       (authored #0c5544)  */
  --color-green-focus: #005540;  /* input focus, success state   (authored #005542)  */

  /* Neutrals */
  --color-warm-grey: #d6cfd1;    /* cta card, timeline blocks    (authored #d3cdcf)  */
  --color-rule: #e5e5e5;         /* blockquote rule              (authored #e2e2e2)  */

  /* Translucent — unchanged by the filter, which is a no-op on pure black/white */
  --overlay-strong: #00000080;   /* video + image scrims                             */
  --overlay-soft: #00000033;
  --border-button: #ffffff14;

  /*
   * Spacing.
   *
   * The larger steps shrink at each breakpoint — that responsiveness was
   * spread across a wall of utility classes in the export and is a property of
   * the scale itself here, so any component using a token gets it for free.
   * Values are rem, so they also ride the fluid root font size in base.css.
   *
   * Use a token where the design intends "one step of the rhythm"; use a plain
   * rem value for one-off measurements that should not respond.
   */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4rem;
  --space-2xl: 5rem;
  --space-3xl: 6rem;
  --space-section: 8rem;

  /* Radii — `--full` was 400rem in the export, i.e. a pill */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 400rem;

  /*
   * Easings, decoded from the Webflow interaction payload so the hover and menu
   * animations keep their original feel once they are plain CSS transitions.
   */
  /*
   * inOutQuint. Holds almost still through its first third, which is fine for
   * something the eye is already following but reads as lag on a control that
   * has just been tapped — prefer --ease-out for those.
   */
  --ease-quint: cubic-bezier(0.86, 0, 0.07, 1);
  /* outQuart: moves immediately, settles gently. The default for UI reveals. */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  /* Kept under the old name; the nav link labels reference it. */
  --ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);    /* button icon slide, 800ms */

  /* Breakpoints are documented here but must be literals in @media queries */
  --bp-tablet: 991px;
  --bp-landscape: 767px;
  --bp-mobile: 479px;
}

/* The upper spacing steps tighten as the viewport narrows. */
@media screen and (max-width: 991px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
    --space-section: 6rem;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 3.5rem;
    --space-section: 4rem;
  }
}