/* ==========================================================================
   tokens.css — design tokens (colors, type, spacing, motion). No selectors
   other than :root so every other file can rely on these variables.
   ========================================================================== */
:root {
  color-scheme: light;

  /* color */
  --paper: #F4F3EF;
  --ink:   #111112;
  --soft:  #5F5E59;
  --blue:  #1F49FF;
  --white: #FFFFFF;

  /* type */
  --wide: "Unbounded", "Archivo Black", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;

  /* layout */
  --gut:  max(20px, env(safe-area-inset-left, 0px));
  --gutr: max(20px, env(safe-area-inset-right, 0px));
  --sec: clamp(72px, 10vw, 128px);       /* vertical rhythm between sections */
  --header-h: 64px;

  /* shape */
  --r-btn: 25px;
  --r-card: 15px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* section "drip" edge (see sections.css). One tile = 720x140 units,
     scaled uniformly so the blobs stay round at any width. */
  --drip-h: clamp(44px, 6.6vw, 96px);
  --pin-h: clamp(36px, 5vw, 60px);
  --drip-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 140'%3E%3Crect width='720' height='30'/%3E%3Crect x='305' y='-80' width='110' height='198' rx='55'/%3E%3Crect x='28' y='-80' width='92' height='158' rx='46'/%3E%3Crect x='170' y='-80' width='74' height='132' rx='37'/%3E%3Crect x='470' y='-80' width='66' height='140' rx='33'/%3E%3Crect x='590' y='-80' width='86' height='176' rx='43'/%3E%3C/svg%3E");
}