/* Design tokens. The only place raw colour values may appear. */
:root {
  /* Colours */
  --color-orange: #FC8400;
  --color-yellow: #F5B833;
  --color-black: #000000;
  --color-navy: #002C5C;
  --color-white: #FFFFFF;
  --color-cream: #FFE8C5;
  --color-brown: #502504;
  --color-grey: #555555;
  --color-grey-dark: #2E2E2E;
  --color-accent: #FA6308;
  --color-red: #FF3131;
  --color-peach: #FF914D;
  --color-paper: #FFF8EC;      /* light reading surface for aux pages */
  --color-rule: #F2DDBB;       /* hairlines on paper */

  --gradient-bistro: linear-gradient(180deg, var(--color-red) 0%, var(--color-peach) 100%);

  /* Font families */
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body: "Lato", system-ui, sans-serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Type scale */
  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs: 0.75rem;     /* 12px footer */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.125rem;  /* 18px */
  --fs-md: 1.3125rem;   /* 21px body copy */
  --fs-lg: 1.375rem;    /* 22px names */
  --fs-xl: 1.6667rem;   /* 26.7px hero link */
  --fs-2xl: 2rem;       /* 32px headings, tagline */
  --fs-3xl: 2.1667rem;  /* 34.7px "Coming soon!" */
  --fs-display: 6rem;   /* 96px "Team" */

  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-body: 1.2;
  --lh-loose: 1.5;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-phone: 36px;
  --radius-screen: 26px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 4px 16px rgb(0 0 0 / 0.15);
  --shadow-phone: 0 0 0 3px var(--color-grey-dark), 0 0 0 4px var(--color-grey), 0 12px 32px rgb(0 0 0 / 0.25);

  /* Layout */
  --container-width: 1110px;
  --container-wide: 1440px;
  --container-reading: 720px;
  --gutter: 16px;
  --section-min-h: 768px;
  --opacity-doodle: 0.3;
}