/* DFM Canada — design tokens (from BRAND_GUIDE.md palette) */
:root {
  /* color — roles, never raw hex at call sites */
  --ink: #17202A;
  --navy: #183153;
  --blue: #246BFE;
  --blue-dark: #1A54D6;
  --mint: #20B486;
  --cloud: #F6F8FB;
  --paper: #FFFFFF;
  --border: #D9E1EA;
  --muted: #5B6B7C;
  --success: #197B4C;
  --warning: #B35C00;

  /* type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* space */
  --s-xs: 8px;
  --s-sm: 16px;
  --s-md: 32px;
  --s-lg: 64px;
  --s-xl: 112px;

  /* layout */
  --max: 1160px;
  --header-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cloud);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: #fff; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* reveal primitives (motion.js drives) */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}