/* Frolickinglama design tokens
   Two colors, each with a job. Saffron is a shape, never a letterform.
   Maroon is action and interaction. Everything else is ink on paper. */

:root {
  /* Color */
  --saffron: #EF9F27;   /* shapes only: the mark's patch, the focus ring. never text. */
  --maroon: #7C2A2A;    /* active state, hover, button fill, the figure in the mark */
  --paper: #FFFFFF;     /* page ground */
  --ink: #1A1A18;       /* all type */
  --ink-mute: #888780;  /* counter, inactive nav, field rules */

  /* Type */
  --face: 'Jost', 'Futura PT', Futura, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;

  --size-wordmark: 34px;
  --size-sentence: 20px;
  --size-nav: 13px;
  --size-counter: 12px;
  --size-label: 11px;
  --size-input: 16px;

  --track-wordmark: -0.5px;
  --track-nav: 0.1em;

  /* Space: 8px baseline */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  /* Layout */
  --page-max: 1440px;
  --page-margin: 64px;
  --rail-width: 220px;
  --rail-gutter: 80px;
  --field-max-height: 78vh;
  --field-max-width: 62vw;

  /* Form */
  --field-height: 44px;
  --rule: 0.5px;

  /* Nothing is round. Nothing is soft. */
  --radius: 0;
  --shadow: none;

  /* Motion */
  --fade: 120ms;
  --hover: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fade: 0ms;
    --hover: 0ms;
  }
}