@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&display=swap");

:root {
  --ink: #191b18;
  --muted: #6f675d;
  --paper: #fffdf9;
  --card: #fffaf2;
  --line: rgba(25, 27, 24, 0.14);
  --sage: #355f49;
  --sage-2: #edf3ef;
  --gold: #c8aa70;
  --rust: #c85f3f;
  --shadow: 0 20px 52px rgba(27, 24, 18, 0.12);
  --radius: 20px;
}

body[data-app-shell] {
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(200,170,112,.15), transparent 24rem),
    #fffdf9;
}

body[data-app-shell] h1,
body[data-app-shell] .brand {
  font-family: "Playfair Display", Georgia, serif;
}

body[data-app-shell] .site-header {
  background: rgba(25, 27, 24, .97);
  border-bottom-color: rgba(255,255,255,.08);
}

body[data-app-shell] .brand {
  color: #f9eadb;
  font-style: italic;
  font-weight: 700;
  text-decoration: none;
}

body[data-app-shell] .brand span {
  color: #c8aa70;
}

body[data-app-shell] .header-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

body[data-app-shell] .header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #f4e8db;
}

body[data-app-shell] .sns-signout {
  appearance: none;
  border: 1px solid rgba(249,234,219,.42);
  border-radius: 999px;
  padding: 8px 12px;
  min-height: 44px;
  background: transparent;
  color: #f9eadb;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body[data-app-shell] .sns-signout:hover,
body[data-app-shell] .sns-signout:focus-visible {
  background: rgba(249,234,219,.11);
  outline: 2px solid #c8aa70;
  outline-offset: 2px;
}

body[data-app-shell] .sns-signout:disabled {
  opacity: .62;
  cursor: wait;
}

body[data-app-shell] .fatigue-action > a,
body[data-app-shell] .fatigue-action summary,
body[data-app-shell] .fatigue-action details[open] div,
body[data-app-shell] .quadrant,
body[data-app-shell] .recipe-card,
body[data-app-shell] .recipe-aside,
body[data-app-shell] .recipe-main,
body[data-app-shell] .price-card,
body[data-app-shell] .center-card {
  background: #fffaf2;
}

body[data-app-shell] .fatigue-action > a {
  border-color: rgba(25,27,24,.15);
  box-shadow: 0 10px 30px rgba(27,24,18,.08);
}

body[data-app-shell] .fatigue-action > a:hover,
body[data-app-shell] .fatigue-action > a:focus-visible {
  border-color: #c8aa70;
  box-shadow: 0 12px 32px rgba(27,24,18,.12);
  outline: none;
}

body[data-app-shell] .fatigue-secondary a,
body[data-app-shell] .header-link.active {
  color: #c8aa70;
}

body[data-app-shell] .btn-primary,
body[data-app-shell] .amount button.active,
body[data-app-shell] .plan-action-number,
body[data-app-shell] .inventory-summary,
body[data-app-shell] .status-card {
  background: #355f49;
  border-color: #355f49;
}

body[data-app-shell] .btn-secondary {
  background: #fffaf2;
  color: #294a3a;
  border-color: #355f49;
}

body[data-app-shell] .eyebrow {
  color: #c85f3f;
}

body[data-app-shell] .notice,
body[data-app-shell] .kitchen-check {
  background: #fff4e6;
  border-color: #d9bb82;
}

body[data-app-shell] .pill,
body[data-app-shell] .grocery-empty {
  background: #edf3ef;
  color: #294a3a;
}

body[data-app-shell] .recipe-art {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, #355f49, #294a3a);
}

@media (max-width: 650px) {
  body[data-app-shell] .site-header {
    padding-inline: 16px;
  }

  body[data-app-shell] .header-nav {
    gap: 9px;
  }

  body[data-app-shell] .sns-signout {
    padding: 7px 11px;
    font-size: .82rem;
  }
}