/* Prep+Eat website – shared styles.
 *
 * Every colour, space, radius and type value below is a Sebell DS token,
 * copied from the app's src/constants/ds-theme.cjs (prep-eat brand, light
 * appearance). Do not invent values here: if something is missing, add it to
 * the DS and re-sync the app, then mirror it in this file.
 *
 * Light-only on purpose – the app's tailwind.config.js sets darkMode:'class'
 * and records that dark is deferred for v1, so these pages match it.
 *
 * Fonts are SELF-HOSTED rather than loaded from Google. A page that promises
 * "no third-party tracking" must not hand every visitor's IP to a third party
 * to render its own privacy policy.
 */

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* colour – DS text/*, surface/*, border/* */
  --text-default: #4f4230;
  --text-subtle: #5f503a;
  --text-brand: #378112;
  --surface-white: #ffffff;
  --surface-lightest: #f8f7f7;
  --surface-primary-lightest: #e9fbe0;
  --surface-primary-main: #56c91d;
  --border-subtle: #e7e6e4;

  /* spacing – DS layout-* / comp-* */
  --layout-xxsmall: 4px;
  --layout-xsmall: 8px;
  --layout-small: 16px;
  --layout-medium: 24px;
  --layout-large: 40px;
  --layout-xlarge: 64px;
  --comp-small: 8px;
  --comp-medium: 12px;
  --comp-large: 16px;
  --comp-xlarge: 24px;

  /* radius – DS borderRadius */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;

  /* type – DS fontSize / lineHeight */
  --display-4: 32px;
  --display-5: 24px;
  --display-6: 16px;
  --paragraph: 16px;
  --small: 12px;

  --font-header: 'Montserrat', system-ui, sans-serif;
  --font-paragraph: 'IBM Plex Sans', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-white);
  color: var(--text-default);
  font-family: var(--font-paragraph);
  font-size: var(--paragraph);
  line-height: 1.65;
}

/* ── shell ─────────────────────────────────────────── */

.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--layout-medium) var(--layout-medium) var(--layout-xlarge);
}

@media (min-width: 40rem) {
  .page {
    padding: var(--layout-xlarge) var(--layout-large);
  }
}

/* ── wordmark ──────────────────────────────────────────
 * "Prep+Eat" is the visual wordmark and the + is the brand mark, so it is
 * set in the header face with the + carrying the brand colour. Text, not an
 * image: no logo asset has been designed for the web.
 */

.wordmark {
  display: inline-block;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: var(--display-5);
  line-height: 1;
  color: var(--text-default);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark .plus {
  color: var(--surface-primary-main);
}

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--layout-small);
  flex-wrap: wrap;
  padding-bottom: var(--layout-medium);
  margin-bottom: var(--layout-large);
  border-bottom: 1px solid var(--border-subtle);
}

.masthead nav {
  display: flex;
  gap: var(--layout-small);
  font-size: var(--small);
}

/* ── type ──────────────────────────────────────────── */

h1 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: var(--display-4);
  line-height: 1.2;
  margin: 0 0 var(--layout-xsmall);
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: var(--display-5);
  line-height: 1.3;
  margin: var(--layout-large) 0 var(--layout-xsmall);
}

h3 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: var(--display-6);
  line-height: 1.4;
  margin: var(--layout-medium) 0 var(--layout-xxsmall);
}

p,
ul,
ol {
  margin: 0 0 var(--layout-small);
}

ul,
ol {
  padding-left: var(--layout-medium);
}

li {
  margin-bottom: var(--comp-small);
}

li > ul,
li > ol {
  margin-top: var(--comp-small);
}

strong {
  font-weight: 700;
}

/* DS text/link is #56C91D, which measures 2.15:1 on white – below the WCAG AA
 * 4.5:1 minimum for body text. text/brand (#378112) is the same family and
 * measures 4.87:1, so links use that. Underlined as well, so colour is never
 * the only signal. See the DS finding in the app's backlog. */
a {
  color: var(--text-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--surface-primary-main);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

.lede {
  color: var(--text-subtle);
  font-size: var(--display-6);
  margin-bottom: var(--layout-medium);
}

.updated {
  color: var(--text-subtle);
  font-size: var(--small);
  margin-bottom: var(--layout-large);
}

/* ── callout ───────────────────────────────────────── */

.callout {
  background: var(--surface-primary-lightest);
  border-radius: var(--radius-large);
  padding: var(--comp-xlarge);
  margin: var(--layout-medium) 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

/* ── contact block ─────────────────────────────────── */

.contact {
  background: var(--surface-lightest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  padding: var(--comp-xlarge);
  margin: var(--layout-medium) 0;
}

.contact > :last-child {
  margin-bottom: 0;
}

.contact .address {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: var(--display-6);
  word-break: break-word;
}

/* ── footer ────────────────────────────────────────── */

.footer {
  margin-top: var(--layout-xlarge);
  padding-top: var(--layout-medium);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-subtle);
  font-size: var(--small);
}

.footer p {
  margin-bottom: var(--comp-small);
}

.footer nav {
  display: flex;
  gap: var(--layout-small);
  flex-wrap: wrap;
}

/* ── home ──────────────────────────────────────────── */

.hero {
  padding: var(--layout-large) 0 var(--layout-medium);
}

.hero .wordmark {
  font-size: var(--display-4);
  margin-bottom: var(--layout-small);
}

.tagline {
  font-family: var(--font-header);
  font-weight: 700;
  color: var(--text-subtle);
  font-size: var(--display-6);
  margin: 0 0 var(--layout-medium);
}

.cards {
  display: grid;
  gap: var(--layout-small);
  margin: var(--layout-medium) 0;
}

@media (min-width: 40rem) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  display: block;
  background: var(--surface-lightest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
  padding: var(--comp-xlarge);
  text-decoration: none;
  color: inherit;
}

.card:hover,
.card:focus-visible {
  background: var(--surface-primary-lightest);
  border-color: var(--surface-primary-main);
}

.card h2 {
  font-size: var(--display-6);
  margin: 0 0 var(--layout-xxsmall);
  color: var(--text-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.card p {
  margin: 0;
  color: var(--text-subtle);
  font-size: var(--small);
}