/* Hot Potato design tokens.
   Colors come from the real object: aluminium foil, butter, chives and potato skin. */

@font-face {
  font-family: "Roboto Flex";
  src: url("../fonts/roboto-flex-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Color */
  --skin: #2B1A12;        /* potato skin: outlines, text, dark bands */
  --skin-soft: #5B4636;   /* secondary text */
  --foil-hi: #F2F4F5;     /* page background, light foil facets */
  --foil: #D6DBDE;        /* surfaces, mid facets */
  --foil-lo: #A7AFB5;     /* shadow facets, rules. Never text */
  --butter: #FFD23F;      /* always a fill with dark text */
  --chive: #55A630;       /* live status, progress */
  --paper: #FFFDF7;       /* pickup ticket, fields */
  --paprika: #C8401A;     /* errors and aborts only */

  /* Type */
  --font: "Roboto Flex", "Helvetica Neue", system-ui, sans-serif;
  --w-display: 1000;
  --w-bold: 800;
  --w-semi: 600;
  --w-text: 400;

  --fs-hero: clamp(3.25rem, 16.5vw, 10rem);
  --fs-h1: clamp(2.6rem, 6.4vw, 5.25rem);
  --fs-h2: clamp(2.4rem, 6vw, 4.75rem);
  --fs-h3: 1.375rem;
  --fs-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  --lh-display: 0.88;
  --lh-text: 1.55;
  --track-display: -0.025em;
  --track-label: 0.08em;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --max: 1200px;

  /* Shape */
  --line: 3px;
  --line-thin: 2px;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --shadow-hard: 5px 5px 0 var(--skin);
  --shadow-hard-s: 3px 3px 0 var(--skin);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

@media (min-width: 720px) {
  :root {
    --gutter-l: max(32px, env(safe-area-inset-left, 0px));
    --gutter-r: max(32px, env(safe-area-inset-right, 0px));
  }
}