/* Curiotter design tokens. Storybook, forest and marigold (D42, D43).
   GENERATED from cq/tokens.py by cq/deliver.py. Do not edit; edit the source and run build.py. */

/* Self-hosted faces (D47). Both are OFL; the licences are beside the files. The canvas loads the
   same two from Google Fonts, the one font host it allows, so the build and the artboards agree. */
@font-face { font-family: "Fredoka"; src: url("/static/fonts/fredoka-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/static/fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/static/fonts/nunito-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/static/fonts/nunito-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/static/fonts/nunito-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/static/fonts/nunito-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  /* surfaces */
  --paper: #f9f5ea;      /* page background */
  --card: #ffffff;       /* cards, fields */
  --tint: #eee8d6;       /* quiet fills, disabled */
  --ink: #24332b;        /* text, outlines */
  --muted: #5f6d64;      /* secondary text */
  --line: #dcd6c2;       /* rules, quiet outlines */

  /* primary */
  --green: #2b8253;      /* primary button, play, selected, checks. A FILL. Green as TEXT is --green-deep. */
  --on-green: #f6fbf4;
  --green-deep: #24734a; /* pressed; also green TEXT on paper or white (the button green fails AA as small text) */

  /* supporting fills and offset shadows, flat only, never gradients */
  --marigold: #f0b429;
  --sky: #cfe3ee;
  --leaf: #cfe3c4;
  --clay: #eec2ae;
  --sky-mid: #6da3c4;    /* third cover color */

  /* the mark (D65). Illustration colours, not UI: only the otter uses them. */
  --otter: #8a6a5c;
  --otter-dk: #63483f;

  /* Library cover fills, one per category (D69, ten of them). Illustration colours like the
     otter's, not UI: nothing but a cover may use them, and they are not part of the D43 palette.
     Six point at palette tokens. The other four are second values of palette hues, not new hues,
     because ten categories need ten fills and the palette holds six that carry small text.
     Every one clears 4.5:1 with the ink or paper the class pairs it with; --cat-earth is
     green-deep rather than green for the same reason --green-deep exists at all. */
  --cat-earth: var(--green-deep);   /* on paper text */
  --cat-animals: var(--marigold);
  --cat-ocean: var(--sky-mid);
  --cat-sky: var(--ink);            /* on paper text: the one dark tile, and night sky earns it */
  --cat-machines: var(--clay);
  --cat-plants: #a9d196;            /* leaf, one value down: leaf itself is too near --sky */
  --cat-places: var(--sky);
  --cat-body: #dfa287;              /* clay, one value down */
  --cat-past: #e7dcb4;              /* marigold, desaturated: old paper */
  --cat-make: #d1901f;              /* marigold, one value down */

  /* one alert color, used sparingly: held recordings, failed payment, clipping */
  --alert: #b3402f;
  --on-alert: #fff6f3;

  /* type */
  --display: "Fredoka", "Nunito", "Trebuchet MS", "Helvetica Neue", sans-serif;
  --body: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-hero: 38px;   /* marketing headline, 1.1 */
  --fs-h1: 26px;     /* task screen title, 1.15 */
  --fs-h2: 22px;     /* section, 1.2 */
  --fs-h3: 18px;     /* card title, 1.25 */
  --fs-body: 15px;   /* 1.45 */
  --fs-script: 17px; /* the script a parent reads, 1.55 */
  --fs-prompt: 22px; /* teleprompter, 1.5 */
  --fs-small: 12.5px;
  --fs-label: 15px;  /* weight 600 */

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;
  --page-x: 20px;

  /* shape */
  --r-card: 18px;
  --r-field: 16px;
  --r-pill: 999px;
  --r-cover: 14px;
  --r-sheet: 24px;
  --outline: 2px;      /* ink outline on marketing surfaces */
  --outline-quiet: 1.5px;
  --offset: 4px;       /* offset shadow distance */

  /* sizes */
  --tap: 44px;
  --btn: 54px;
  --btn-small: 44px;
  --field-h: 50px;
  --play: 44px;
  --play-small: 34px;
}