/* Public marketing site design tokens. See design/STYLE-GUIDE.md.
   Separate from tokens.css, which the admin panel, sign-in pages and app share. */
:root {
  /* Palette */
  --ink: #17303b;
  --ink-soft: #4a606b;
  --slate: #3d6075;
  --paper: #f2f3ef;
  --white: #fff;
  --carbon: #f4ce3a;
  --carbon-strong: #e6bd22; /* primary button hover */
  --carbon-wash: rgb(244 206 58 / .22);
  --markup: #c23a2b;
  --pass: #2b7a4b;
  --rule: rgb(23 48 59 / .18);

  /* Type */
  --font-sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-hand: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  --wdth-display: 82;
  --wdth-sub: 90;
  --step-4: clamp(2.25rem, 1.66rem + 2.64vw, 3.625rem);
  --step-3: clamp(1.8125rem, 1.48rem + 1.48vw, 2.625rem);
  --step-2: clamp(1.4375rem, 1.28rem + .68vw, 1.8125rem);
  --step-1: clamp(1.1875rem, 1.14rem + .23vw, 1.3125rem);
  --step-0: 1.0625rem;
  --step--1: .90625rem;
  --note: clamp(1.125rem, .98rem + .64vw, 1.4375rem);
  --time: .9375rem;
  --measure: 66ch;
  --measure-lead: 56ch;

  /* Layout */
  --content-max: 1240px;
  --gutter: 24px;
  --side: 16px;
  --space-section: clamp(4rem, 2.36rem + 7.27vw, 7.5rem);
  --space-tight: calc(var(--space-section) * .6);
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-phone: 28px;
  --border: 2px solid var(--ink);

  /* Motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-pen: cubic-bezier(.45, .05, .55, .95);
  --dur-tap: 320ms;
  --dur-ui: 240ms;
  --dur-enter: 420ms;
  --dur-draw: 560ms;
  --dur-step: 380ms;
}

@media (min-width: 761px) {
  :root { --side: 20px; }
}