:root {
  --farm-ink: #322b22;
  --farm-muted: #655d4c;
  --farm-paper: #fbf5e6;
  --farm-cream: #f3ecd9;
  --farm-sage: #5d6b4b;
  --farm-sage-light: #e5e9d8;
  --farm-barn: #963f30;
  --farm-barn-dark: #763225;
  --farm-wheat: #d8ab6d;
  --farm-rule: #cdbb9a;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--farm-ink);
  background: var(--farm-cream);
}

h1, h2, h3 { font-family: Georgia, "Palatino Linotype", serif; letter-spacing: -.025em; }
.brand { color: var(--farm-barn); font-family: Georgia, serif; font-weight: 700; letter-spacing: .19em; }
.eyebrow { color: var(--farm-barn); font-family: "Trebuchet MS", sans-serif; letter-spacing: .17em; }

/* The photo remains visible around the parchment panels and through their soft tint. */
.display-page { background: #302c24; color: #fff7e7; }
.display-shell {
  background:
    linear-gradient(180deg, rgba(37, 29, 23, .26) 0%, rgba(39, 35, 27, .32) 32%, rgba(33, 37, 29, .60) 100%),
    url("../images/farmstead-sunrise.png") center center / cover no-repeat;
}
.display-header { border-bottom: 2px solid rgba(255, 245, 217, .72); }
.display-header .brand { color: #fff2d2; text-shadow: 0 2px 7px #3e2a1c; }
.display-header h1 { color: #fff9e9; text-shadow: 0 2px 12px #362d24, 0 1px 2px #362d24; }
.clock { color: #ffe2a5; font-family: Georgia, serif; text-shadow: 0 2px 12px #35271f; }
.panel {
  border: 2px solid rgba(118, 80, 47, .48);
  border-radius: 13px;
  background: rgba(251, 245, 230, .88);
  color: var(--farm-ink);
  box-shadow: 0 0 0 3px rgba(255, 246, 221, .32), 0 20px 45px rgba(29, 29, 23, .25);
  backdrop-filter: blur(1px);
}
.meals-panel { background: rgba(245, 242, 222, .90); }
.section-heading { border-bottom: 2px solid var(--farm-rule); padding-bottom: 10px; }
.section-heading h2 { color: var(--farm-ink); }
.calendar-day { border-top: 1px solid rgba(120, 95, 59, .27); }
.calendar-day:first-child { border-top: 0; }
.calendar-day.is-today { background: rgba(237, 204, 146, .46); border-radius: 6px; }
.day-label { color: var(--farm-barn-dark); font-family: Georgia, serif; font-size: clamp(1.18rem, 1.55vw, 1.9rem); }
.day-event { color: var(--farm-ink); font-size: clamp(1.05rem, 1.36vw, 1.7rem); }
.day-event b { color: var(--farm-barn-dark); }
.quiet-day, .more-events { color: var(--farm-muted); }
.display-meal { border-top: 1px solid var(--farm-rule); }
.display-meal:first-child { border-top: 0; }
.display-meal h3 { color: var(--farm-barn-dark); }
.display-meal p { color: var(--farm-ink); }
.display-meal small { color: var(--farm-muted); }

/* Phone and tablet pages use the same colors, with a short view of the farm. */
.manage-page {
  background:
    radial-gradient(circle at 8% 12%, rgba(222, 192, 136, .18), transparent 30%),
    repeating-linear-gradient(0deg, rgba(116, 93, 65, .022) 0, rgba(116, 93, 65, .022) 1px, transparent 1px, transparent 5px),
    var(--farm-cream);
  color: var(--farm-ink);
}
.management-shell, .manage-shell { max-width: 940px; }
.farm-banner {
  height: 165px;
  border: 5px solid rgba(251, 245, 230, .94);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(76, 52, 36, .04), rgba(53, 56, 37, .15)),
    url("../images/farmstead-sunrise.png") center 52% / cover no-repeat;
  box-shadow: 0 0 0 1px #c6b28f, 0 10px 25px rgba(62, 47, 30, .16);
}
.management-nav a {
  border: 1px solid #d7c5a4;
  border-radius: 7px;
  background: #fff9e9;
  color: var(--farm-ink);
  font-family: Georgia, serif;
  box-shadow: 0 2px 0 rgba(106, 81, 48, .10);
}
.management-nav a:hover, .management-nav a:focus-visible { background: var(--farm-sage-light); color: #283824; }
.page-heading h1, .manage-header h1, .month-title { color: var(--farm-ink); }
.page-heading p, .intro, .hint, .manage-header p { color: var(--farm-muted); }
.page-heading { margin-top: 22px; }
.display-link { color: var(--farm-barn-dark); border-color: var(--farm-barn); }
.mobile-card, .date-card, .edit-meal {
  border: 1px solid #d8c7a8;
  border-radius: 13px;
  background: rgba(255, 250, 237, .97);
  box-shadow: 0 4px 0 rgba(183, 158, 116, .10), 0 14px 28px rgba(83, 68, 48, .07);
}
.mobile-card h2, .date-card h2, .edit-meal h2 { color: var(--farm-ink); }
.primary-link, .primary-button, .save-button {
  border-radius: 8px;
  background: var(--farm-barn);
  color: #fff9ec;
  font-family: "Trebuchet MS", sans-serif;
  box-shadow: 0 4px 0 rgba(93, 42, 32, .17);
}
.primary-link:hover, .primary-button:hover, .save-button:hover { background: var(--farm-barn-dark); }
.secondary-button, .month-actions a, .date-controls a, .date-picker button {
  border-radius: 8px;
  background: var(--farm-sage-light);
  color: #35452f;
}
.date-controls a:nth-child(2) { background: var(--farm-sage); color: white; }
.stack-form input, .stack-form select, .stack-form textarea,
.planner-meal input, .planner-meal select, .edit-meal input, .edit-meal textarea, .date-picker input {
  border: 1px solid #c9b797;
  border-radius: 8px;
  background: #fffdf5;
  color: var(--farm-ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  outline-color: var(--farm-barn);
}
.month-day {
  border-color: #ddcfb3;
  border-radius: 7px;
  background: #fffaf0;
  color: var(--farm-ink);
}
.month-day span { color: var(--farm-barn-dark); }
.month-day.today { background: var(--farm-sage-light); }
.month-day.selected { outline-color: var(--farm-barn); }
.weekday { color: var(--farm-sage); font-family: Georgia, serif; }
.list-row, .planner-meal, .ingredient-row { border-color: var(--farm-rule); }
.row-actions a, .row-actions button { background: var(--farm-sage-light); color: #35452f; }
.row-actions button[type=submit] { background: #f2dfd5; color: var(--farm-barn-dark); }
.planner-meal button { background: var(--farm-sage); border-radius: 8px; }
.shopping-item { border-color: #d6c7a9; background: #fffaf0; color: var(--farm-ink); }
.shopping-item>span:first-child, .shopping-item em { color: var(--farm-barn-dark); }
.shopping-item small, .recipe-card small { color: var(--farm-muted); }
.shopping-item.already-have, .shopping-item.purchased { background: var(--farm-sage-light); color: #43533b; }
.meal-number { background: var(--farm-sage-light); color: #43533b; }
.saved-message { background: var(--farm-sage-light); color: #354b31; }

button, a, input, select, textarea { -webkit-tap-highlight-color: rgba(150, 63, 48, .18); }
:focus-visible { outline: 3px solid var(--farm-barn); outline-offset: 3px; }

@media (max-width: 700px) {
  .farm-banner { height: 112px; }
  .display-shell { background-position: center center; }
  .display-header h1 { font-size: 2.1rem; }
  .panel { backdrop-filter: none; }
  .date-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .date-picker label { grid-column: 1 / -1; }
  .date-picker input { min-width: 0; }
  .date-picker button { min-width: 64px; height: 44px; }
}