:root {
  --color-page-bg: #E8E1D4;
  --color-content-bg: #F3F3E2;
  --color-section-bg: #FFF9EF;
  --color-card-bg: #F5EFE5;
  --color-border: #DED2C2;

  --color-primary-green: #159947;
  --color-primary-green-dark: #127A3D;
  --color-primary-green-soft: #DDF1D9;
  --color-food-orange: #F26422;
  --color-food-orange-dark: #D95218;

  --color-heading: #252B24;
  --color-text: #566055;
  --color-text-secondary: #718072;
  --color-shadow: rgba(74, 68, 54, 0.08);

  --color-on-accent: #FFFFFF;
  --color-focus-shadow: rgba(21, 153, 71, 0.18);
  --color-overlay: rgba(255, 249, 239, 0.95);
  --color-danger: #C93C4E;
  --color-danger-dark: #A82F40;
  --color-danger-soft: #F8DEE2;
  --color-warning: #C86B16;
  --color-warning-soft: #FCE8C8;
  --color-warning-text: #75400F;
  --color-info: #2F6F9F;
  --color-info-soft: #DDECF4;
  --color-info-text: #25587B;

  --site-outer-background: var(--color-page-bg);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-page-bg);
  --bs-heading-color: var(--color-heading);
  --bs-link-color: var(--color-primary-green-dark);
  --bs-link-color-rgb: 18, 122, 61;
  --bs-link-hover-color: var(--color-primary-green);
  --bs-link-hover-color-rgb: 21, 153, 71;
  --bs-border-color: var(--color-border);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-secondary-bg: var(--color-card-bg);
  --bs-tertiary-bg: var(--color-content-bg);
}

html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  color: var(--color-text);
  background-color: var(--color-page-bg);
}

body > .container {
  background-color: var(--color-content-bg);
}

body.account-entry-page > .container,
body.user-recipes-page > .container,
body.information-page > .container {
  background-color: transparent;
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: 24px;
}

.account-form { min-width: 0; }
.account-form h1 { font-size: clamp(26px, 3vw, 36px); }
.account-visual { min-width: 0; text-align: center; }
.account-visual h2 { color: var(--color-primary-green-dark); font-size: clamp(26px, 3vw, 36px); line-height: 1.3; }
.account-visual p { max-width: 360px; margin: 18px auto 28px; }
.account-visual img { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center; border-radius: 16px; }

@media (max-width: 767.98px) {
  .account-layout { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 32px; }
  .account-visual img { height: 160px; }
}

body:not(.home-page):not(.dashboard-page) > .container > main {
  margin-block: 24px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background-color: var(--color-section-bg);
  box-shadow: 0 2px 8px var(--color-shadow);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--color-heading);
}

a {
  color: var(--color-primary-green-dark);
}

a:hover {
  color: var(--color-primary-green);
}

hr {
  color: var(--color-border);
  opacity: 1;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--color-primary-green);
  box-shadow: 0 0 0 0.2rem var(--color-focus-shadow);
}

.btn-primary,
.btn-success {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-primary-green);
  --bs-btn-border-color: var(--color-primary-green);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-primary-green-dark);
  --bs-btn-hover-border-color: var(--color-primary-green-dark);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-primary-green-dark);
  --bs-btn-active-border-color: var(--color-primary-green-dark);
  --bs-btn-disabled-color: var(--color-on-accent);
  --bs-btn-disabled-bg: var(--color-primary-green);
  --bs-btn-disabled-border-color: var(--color-primary-green);
}

.btn-food {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-food-orange);
  --bs-btn-border-color: var(--color-food-orange);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-food-orange-dark);
  --bs-btn-hover-border-color: var(--color-food-orange-dark);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-food-orange-dark);
  --bs-btn-active-border-color: var(--color-food-orange-dark);
}

.btn-secondary,
.btn-light {
  --bs-btn-color: var(--color-heading);
  --bs-btn-bg: var(--color-card-bg);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-heading);
  --bs-btn-hover-bg: var(--color-content-bg);
  --bs-btn-hover-border-color: var(--color-primary-green-soft);
  --bs-btn-active-color: var(--color-heading);
  --bs-btn-active-bg: var(--color-primary-green-soft);
  --bs-btn-active-border-color: var(--color-primary-green);
}

.btn-outline-primary,
.btn-outline-success {
  --bs-btn-color: var(--color-primary-green-dark);
  --bs-btn-border-color: var(--color-primary-green);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-primary-green);
  --bs-btn-hover-border-color: var(--color-primary-green);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-primary-green-dark);
  --bs-btn-active-border-color: var(--color-primary-green-dark);
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-heading);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-heading);
  --bs-btn-hover-bg: var(--color-card-bg);
  --bs-btn-hover-border-color: var(--color-primary-green-soft);
  --bs-btn-active-color: var(--color-heading);
  --bs-btn-active-bg: var(--color-primary-green-soft);
  --bs-btn-active-border-color: var(--color-primary-green);
}

.btn-danger {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-danger-dark);
  --bs-btn-hover-border-color: var(--color-danger-dark);
}

.btn-outline-danger {
  --bs-btn-color: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-danger);
  --bs-btn-hover-border-color: var(--color-danger);
}

.form-control,
.form-select {
  color: var(--color-heading);
  background-color: var(--color-section-bg);
  border-color: var(--color-border);
}

.form-control::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  color: var(--color-heading);
  background-color: var(--color-section-bg);
  border-color: var(--color-primary-green);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--color-card-bg);
}

.form-check-input {
  background-color: var(--color-section-bg);
  border-color: var(--color-border);
}

.form-check-input:checked {
  background-color: var(--color-primary-green);
  border-color: var(--color-primary-green);
}

.form-label,
.form-check-label {
  color: var(--color-heading);
}

.form-text,
.text-muted {
  color: var(--color-text-secondary) !important;
}

.card {
  color: var(--color-text);
  background-color: var(--color-card-bg);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.table {
  --bs-table-color: var(--color-text);
  --bs-table-bg: var(--color-section-bg);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-color: var(--color-text);
  --bs-table-striped-bg: var(--color-content-bg);
  --bs-table-hover-color: var(--color-text);
  --bs-table-hover-bg: var(--color-content-bg);
  border-color: var(--color-border);
}

.table > thead {
  --bs-table-bg: var(--color-card-bg);
  color: var(--color-heading);
}

.table-responsive {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background-color: var(--color-section-bg);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.modal-content {
  color: var(--color-text);
  background-color: var(--color-section-bg);
  border-color: var(--color-border);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.modal-header,
.modal-footer {
  border-color: var(--color-border);
}

.nav-pills .nav-link {
  color: var(--color-heading);
}

.nav-pills .nav-link:hover {
  background-color: var(--color-primary-green-soft);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--color-on-accent);
  background-color: var(--color-primary-green);
}

.alert-success {
  --bs-alert-color: var(--color-primary-green-dark);
  --bs-alert-bg: var(--color-primary-green-soft);
  --bs-alert-border-color: var(--color-primary-green);
}

.alert-warning {
  --bs-alert-color: var(--color-warning-text);
  --bs-alert-bg: var(--color-warning-soft);
  --bs-alert-border-color: var(--color-warning);
}

.alert-danger {
  --bs-alert-color: var(--color-danger-dark);
  --bs-alert-bg: var(--color-danger-soft);
  --bs-alert-border-color: var(--color-danger);
}

.alert-info {
  --bs-alert-color: var(--color-info-text);
  --bs-alert-bg: var(--color-info-soft);
  --bs-alert-border-color: var(--color-info);
}

.text-bg-success {
  color: var(--color-primary-green-dark) !important;
  background-color: var(--color-primary-green-soft) !important;
}

.text-bg-warning {
  color: var(--color-warning-text) !important;
  background-color: var(--color-warning-soft) !important;
}

.text-bg-secondary {
  color: var(--color-heading) !important;
  background-color: var(--color-card-bg) !important;
  border: 1px solid var(--color-border);
}

.recipe-content {
  overflow-wrap: anywhere;
}

.recipe-text {
  white-space: pre-wrap;
}

.recipe-image {
  display: block;
  max-height: 480px;
  object-fit: contain;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--color-text-secondary);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

@media (max-width: 575.98px) {
  body:not(.home-page):not(.dashboard-page) > .container > main {
    margin-block: 12px;
    padding: 16px;
  }
}