/* Coffee Games — one stylesheet for the whole site.
   Palette and type are lifted from the apps (PantryPalette.swift) so the site and the game feel
   like one product. Built for a 55+ audience: large type, generous line height, high contrast,
   nothing below 4.5:1. No web fonts, no analytics, no cookies — the privacy policy says we do not
   track, and a page that loaded a tracker would make a liar of it. */

:root {
  --cream: #f7edd9;
  --paper: #fffaf1;
  --ink: #2f2015;
  --ink-soft: #574433;
  --edge: #d8c7a8;
  --teal: #10585f;
  --teal-dark: #0b4046;
  --herb: #4a6741;
  --caramel: #8a5a12;
  --paprika: #9c3b23;
  --rose: #a63d5e;
  --radius: 14px;
  --maxw: 44rem;
}

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

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

body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;      /* 18px floor: this audience should never have to zoom */
  line-height: 1.7;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

header.site {
  background: var(--teal);
  color: #fff;
  padding: 1rem 1.25rem;
}
header.site .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
header.site a { color: #fff; text-decoration: none; }
header.site .brand { font-weight: 700; font-size: 1.15rem; }
header.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
header.site nav a { text-decoration: underline; text-underline-offset: 3px; }
header.site a:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 3px solid var(--caramel);
  outline-offset: 3px;
}

h1 { font-size: 2.1rem; line-height: 1.25; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.5rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 0.35rem; }
p, li { max-width: 38rem; }
a { color: var(--teal-dark); }

.lede { font-size: 1.3rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: 0.98rem; }

.card {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  margin: 1.25rem 0;
}

/* Same geometry as the app's controls: radius 14, generous target height. */
.btn {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.9rem 1.5rem;
  min-height: 52px;
  border-radius: var(--radius);
  border: 2px solid transparent;
}
.btn:hover { background: var(--teal-dark); }
.btn.secondary { background: transparent; color: var(--teal-dark); border-color: var(--teal); }

.levels { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.levels li {
  flex: 1 1 9rem;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  text-align: center;
  font-weight: 700;
  border: 2px solid;
}
.levels .easy { color: var(--herb); border-color: var(--herb); background: rgba(74,103,65,0.10); }
.levels .medium { color: var(--caramel); border-color: var(--caramel); background: rgba(138,90,18,0.10); }
.levels .hard { color: var(--paprika); border-color: var(--paprika); background: rgba(156,59,35,0.10); }
.levels .stars { display: block; font-size: 0.95rem; letter-spacing: 0.15em; }

.dedication {
  background: rgba(166,61,94,0.08);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  font-style: italic;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { font-weight: 700; }
.table-scroll { overflow-x: auto; }

footer.site {
  border-top: 1px solid var(--edge);
  margin-top: 3rem;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--ink-soft);
  font-size: 1rem;
}
footer.site .inner { max-width: var(--maxw); margin: 0 auto; }
footer.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #191410;
    --paper: #221b15;
    --ink: #f4ece0;
    --ink-soft: #cbbba6;
    --edge: #3d3227;
    --teal: #2e8b93;
    --teal-dark: #57b3ba;
    --herb: #8fb383;
    --caramel: #d9a34d;
    --paprika: #e08064;
    --rose: #e396ae;
  }
  a { color: var(--teal-dark); }
  .btn { color: #10201f; }
  .levels .easy { background: rgba(143,179,131,0.14); }
  .levels .medium { background: rgba(217,163,77,0.14); }
  .levels .hard { background: rgba(224,128,100,0.14); }
}