/* Code tokens. DESIGN.md describes every role below; change both together. */
:root {
  color-scheme: dark;

  /* Color */
  --color-sheet: #103A6E;
  --color-sheet-deep: #0C2F5A;
  --color-chalk: #F0F3EE;
  --color-chalk-muted: #BFD0E0;
  --color-line: #8FB0D0;
  --color-pencil: #F2C53D;
  --color-ink: #0A2747;
  --color-alert: #FFC2B3;

  /* Fonts */
  --font-text: "Fira Sans", "Segoe UI", "Noto Sans", sans-serif;
  --font-head: "Fira Sans Condensed", "Arial Narrow", "Fira Sans", sans-serif;

  /* Type: phone (<600) */
  --type-display: 40px;
  --type-h2: 32px;
  --type-value: 24px;
  --type-lead: 18px;
  --type-body: 16px;
  --type-small: 15px;
  --type-label: 14px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout */
  --sheet-max: 1360px;
  --rail-min: 120px;
  --rail-max: 280px;
  --gutter: var(--space-2);
  --pad: var(--space-4);
  --header-h: 56px;
  --section-gap: var(--space-16);

  /* Lines (page). Drawing lines are in user units, set per view in site.css. */
  --line-frame: 2px;
  --line-hair: 1px;

  /* Controls */
  --control-sm: 44px;
  --control-lg: 52px;
  --icon-sm: 20px;

  /* Motion */
  --motion-micro: 120ms;
  --motion-small: 180ms;
  --motion-plot: 1400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Interaction kit mapping. Machine slides settle with almost no overshoot,
     so the release uses the kit's snap curve instead of its pop curve. */
  --ui-focus-ring: var(--color-pencil);
  --ui-highlight: rgb(240 243 238 / 0.2);
  --ui-highlight-on-light: rgb(10 39 71 / 0.16);
  --ui-release: 300ms;
  --ui-spring-pop: linear(0, 0.03, 0.105, 0.207, 0.32, 0.435, 0.545, 0.644, 0.732, 0.806, 0.867, 0.915, 0.953, 0.981, 1.001, 1.015, 1.023, 1.027, 1.028, 1.028, 1.026, 1.023, 1.02, 1.016, 1.013, 1.01, 1.008, 1.006, 1.004, 1.003, 1);
}

@media (min-width: 600px) {
  :root {
    --type-display: 48px;
    --type-h2: 40px;
    --type-value: 28px;
    --type-lead: 20px;
    --type-body: 18px;
    --gutter: var(--space-4);
    --pad: var(--space-6);
    --section-gap: var(--space-16);
  }
}

@media (min-width: 1200px) {
  :root {
    --type-display: 64px;
    --type-h2: 48px;
    --type-value: 32px;
    --gutter: var(--space-6);
    --pad: var(--space-8);
    --section-gap: var(--space-24);
  }
}

:root { --ui-link-active: var(--color-pencil); }