/* Tokens mirror DESIGN.md, which mirrors the Macify site. */
:root {
  --canvas: #161719; /* dark grey, so black and near-black parts stand off it */
  --tile-1: #1c1d20;
  --tile-2: #222326;
  --tile-3: #2b2c30;
  --parchment: #f5f5f7;
  --ink: #f5f5f7;
  --ink-muted: #a1a1a6;
  --ink-faint: #6e6e73;
  --ink-light: #1d1d1f;
  --ink-light-muted: #6e6e73;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --link: #2997ff;
  --link-light: #0066cc;
  --focus: #0071e3;

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --r-sm: 8px; --r-md: 12px; --r-key: 14px; --r-lg: 24px; --r-xl: 32px;
  --section: clamp(67px, 9.8vw, 126px);

  /* Page chrome motion (Macify) */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1); /* small controls only */
  --reveal: 900ms;
  --press: 120ms;

  /* Notch stage motion (D07 section 8) */
  --m-fast: 120ms;
  --m-base: 180ms;
  --m-medium: 220ms;
  --m-slow: 260ms;
  --m-expand: 320ms;
  --m-hero: 900ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);

  /* App springs sampled by js/spring.js: expand 0.36/0.86 (460ms), collapse 0.30/0.92 (360ms), reward 0.50/0.70 (785ms). */
  --sp-expand: linear(0, .0462, .1527, .2841, .4183, .5429, .6515, .742, .8147, .8712, .9138, .945, .9673, .9825, .9926, .9988, 1.0025, 1.0043, 1.005, 1.0049, 1.0045, 1.0039, 1.0032, 1.0025, 1);
  --sp-expand-d: 460ms;
  --sp-collapse: linear(0, .0561, .1791, .3234, .4637, .588, .6918, .7748, .839, .8874, .923, .9486, .9666, .9789, .9873, .9927, .9962, .9983, .9995, 1.0002, 1);
  --sp-collapse-d: 360ms;
  --sp-reward: linear(0, .0411, .1412, .2721, .4128, .5492, .6723, .7773, .8626, .9285, .9768, 1.0099, 1.0307, 1.0418, 1.0458, 1.0449, 1.0409, 1.0352, 1.0287, 1.0223, 1.0165, 1.0114, 1.0073, 1.004, 1.0016, .9999, .9988, .9982, .9979, .9979, .9981, .9983, 1);
  --sp-reward-d: 785ms;

  --product-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--line-strong);

  /* Notch colors (D07 section 3.1) */
  --notch: #000;
  --notch-text: #f5f5f7;
  --notch-text-2: #a1a1a6;
  --notch-green: #30d158;
  --notch-amber: #ffd60a;
  --notch-red: #ff453a;
  --notch-teal: #64d2ff;
  --notch-blue: #0a84ff;

  color-scheme: dark;
}