/* Every colour and typeface on the site lives here. Change a value and the whole
   site follows. Values match the app's brand tokens (src/app/globals.css). */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour */
  --paper: #f6f6f4;
  --surface: #ffffff;
  --midnight: #1c2533;
  --midnight-raised: #2a3546;
  --action: #2f5d8c;
  --action-on-dark: #9cc0e6;
  --slate: #5e6878;
  --fog: #a9b0bb;
  --mist: #e4e7eb;
  --on-dark: #ffffff;
  --flag-bg: #f3e7d0;
  --flag-text: #6f4708;

  /* Type */
  --font-heading: "Urbanist", "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --size-display: clamp(2.75rem, 7vw, 5.5rem);
  --size-heading: clamp(2rem, 3.8vw, 3.25rem);
  --size-lede: clamp(1.0625rem, 1.5vw, 1.25rem);
  --size-body: 1rem;
  --size-small: 0.875rem;

  /* Surfaces */
  --radius: 16px;
  --radius-phone: 28px;
  --shadow: 0 1px 2px rgb(28 37 51 / 0.04), 0 18px 44px -20px rgb(28 37 51 / 0.24);
  --edge: rgb(28 37 51 / 0.08);
  --edge-on-dark: rgb(255 255 255 / 0.14);
}