/**
 * MissEat brand tokens, taken verbatim from the app.
 *
 * Source of truth is src/constants/colors.ts and src/constants/typography.ts.
 * If a value changes there, change it here — a person who sees the site and
 * then installs the app should not feel they arrived somewhere else.
 *
 * Lora is served from web/fonts rather than the Google Fonts CDN. Loading it
 * from Google sends every EU visitor's IP to a third party, which German
 * courts have held to be a GDPR breach, and this app declares EU availability.
 */

@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The four tones. Nothing outside this list belongs on the site. */
  --navy: #0d3b66;
  --navy-soft: #445a72;
  --navy-faint: #526a80;
  --saffron: #c08a33;
  --saffron-ink: #a5731f;
  --saffron-soft: #f7edd9;
  --white: #ffffff;
  --canvas: #fcfaf7;
  --border: #f2ece4;

  /* Names the old stylesheets used, kept pointing at the new tones so a
     missed rule degrades to the right colour instead of the old orange. */
  --cream: var(--white);
  --ink: var(--navy);
  --anthracite: var(--navy);
  --teal: var(--navy);
  --muted: var(--navy-soft);
  --faint: var(--navy-faint);
  --terracotta: var(--saffron);
  --terracotta-soft: var(--saffron-soft);
  --orange: var(--saffron);
  --orange-deep: var(--saffron-ink);
  --orange-soft: var(--saffron-soft);
  --card: var(--white);
  --line: var(--border);
  --ghost: var(--navy-faint);

  --font: 'Lora', Georgia, 'Times New Roman', serif;
  --shadow: 0 16px 48px rgba(13, 59, 102, 0.08);
  --phone-shadow: 0 24px 64px rgba(13, 59, 102, 0.14);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max: 1080px;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--navy);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

a {
  color: var(--saffron-ink);
}

/**
 * The wordmark, set the way the app sets it: MISS in saffron, EAT in the
 * ground's opposite, wide tracking, no bold.
 */
.wordmark {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}

.wordmark .wm-miss {
  color: var(--saffron);
}

.wordmark .wm-eat {
  color: var(--navy);
}

.on-navy .wordmark .wm-eat {
  color: var(--white);
}