/* Eatify's shared visual tokens and public-site components. */
:root {
  --font-display: "Comfortaa", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -.3px;
  --green: oklch(0.63 0.115 142);
  --green-bright: oklch(0.78 0.15 145);
  --green-deep: oklch(0.43 0.08 142);
  --green-tint: oklch(0.955 0.04 142);
  --green-tint2: oklch(0.92 0.055 142);
  --page-bg: oklch(0.975 0.018 140);
  --surface: #fff;
  --surface-2: oklch(0.965 0.022 142);
  --text: oklch(0.27 0.025 150);
  --muted: oklch(0.51 0.025 150);
  --border: oklch(0.92 0.02 142);
  --ok: oklch(0.50 0.13 142);
  --ok-t: oklch(0.955 0.04 142);
  --warn: oklch(0.52 0.13 70);
  --warn-t: oklch(0.97 0.05 80);
  --bad: oklch(0.50 0.20 25);
  --bad-t: oklch(0.97 0.03 25);
  --allowed-c: var(--ok);
  --allowed-t: var(--ok-t);
  --restricted-c: var(--warn);
  --restricted-t: var(--warn-t);
  --banned-c: var(--bad);
  --banned-t: var(--bad-t);
  --unknown-c: var(--muted);
  --unknown-t: var(--surface-2);
  --r-pill: 999px;
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow-sm: 0 4px 14px -6px color-mix(in oklch, var(--green) 30%, transparent);
  --shadow-md: 0 10px 26px -12px color-mix(in oklch, var(--green) 34%, transparent);
  --shadow-lg: 0 22px 50px -20px color-mix(in oklch, var(--green) 40%, transparent);
  --shadow-xl: 0 28px 70px -24px color-mix(in oklch, var(--green) 45%, transparent);
  --shadow-card: 0 10px 28px -16px color-mix(in oklch, var(--green) 36%, transparent);
  --card-border-w: 1px;
  --container-width: 1200px;
  --type-page-title: clamp(26px, 4vw, 40px);
  --type-section-title: clamp(26px, 4.5vw, 46px);
  --type-card-title: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 0; }
body { font-family: var(--font-body); color: var(--text); background: var(--page-bg); }
body > svg.svg-sprite { display: block; position: absolute; width: 0; height: 0; overflow: hidden; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 3px; }
.container, .wrap { width: min(100%, var(--container-width)); margin-inline: auto; padding-inline: 24px; }

.site-shell-header {
  --site-shell-green-deep: oklch(0.43 0.08 142);
  --site-shell-green-tint: oklch(0.955 0.04 142);
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklch, #fff 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-shell-header__inner { min-height: 66px; display: flex; align-items: center; gap: 28px; }
.site-logo { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: oklch(0.27 0.025 150); font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1; text-decoration: none; white-space: nowrap; }
.site-logo__accent { color: oklch(0.63 0.115 142); }
.site-logo img { width: 26px; height: 26px; object-fit: contain; }
.site-shell-nav { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.site-shell-nav a, .site-shell-mobile > a:not(.btn) { padding: 8px 14px; border-radius: var(--r-pill); color: var(--muted); font-size: 15px; font-weight: 700; text-decoration: none; transition: color .15s, background .15s; }
.site-shell-nav a:hover, .site-shell-mobile > a:not(.btn):hover { color: var(--text); background: var(--surface-2); }
.site-shell-nav a.active, .site-shell-mobile > a.active { color: var(--site-shell-green-deep); background: var(--site-shell-green-tint); }
.site-shell-cta { margin-left: auto; background: oklch(0.43 0.08 142) !important; color: #fff !important; }
.site-shell-cta:hover { filter: brightness(1.12); }
.site-shell-toggle { display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); cursor: pointer; }
.site-shell-toggle span { display: block; height: 2px; margin: 4px 0; background: currentColor; border-radius: 2px; }
.site-shell-toggle:hover { background: var(--surface-2); }
.site-shell-mobile[hidden] { display: none !important; }
.site-shell-mobile { display: none; flex-direction: column; gap: 4px; padding-block: 12px 20px; border-top: 1px solid var(--border); }
.site-shell-mobile > a:not(.btn) { color: var(--text); border-radius: var(--r-md); }
.site-shell-mobile .btn { align-self: stretch; justify-content: center; margin-top: 8px; }
.site-shell-mobile .btn--primary { background: var(--site-shell-green-deep); color: #fff; }
.site-shell-header :focus-visible { outline-color: var(--site-shell-green-deep); }

.site-shell-footer { margin-top: 20px; padding: 58px 0 30px; background: oklch(0.22 0.02 150); color: oklch(0.86 0.02 150); }
.site-shell-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.site-logo--footer { color: #fff; }
.site-shell-footer__about p { max-width: 290px; margin: 14px 0 0; color: oklch(0.78 0.02 150); font-size: 15px; font-weight: 600; line-height: 1.55; }
.site-shell-footer__links { display: flex; flex-direction: column; align-items: flex-start; }
.site-shell-footer__links h2 { margin: 0 0 14px; color: oklch(0.70 0.03 150); font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.site-shell-footer__links a { padding: 5px 0; color: oklch(0.86 0.02 150); font-size: 15px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.site-shell-footer__links a:hover, .site-shell-footer__bottom a:hover { color: #fff; text-decoration: underline; }
.site-shell-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .13); color: oklch(0.68 0.02 150); font-size: 14px; font-weight: 600; }

/* Shared sizing for controls and surfaces; page-specific layouts remain local. */
.btn, .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; height: auto; padding: 10px 22px; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s, background .15s, border-color .15s; }
.btn--sm, .ui-button--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn--lg, .ui-button--lg { min-height: 52px; padding: 12px 26px; }
.btn--primary, .ui-button--primary { background: var(--green-deep); color: #fff; }
.btn--ghost, .ui-button--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--secondary, .ui-button--secondary { background: var(--green-tint); color: var(--green-deep); }
.btn:hover:not(:disabled), .ui-button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active:not(:disabled), .ui-button:active:not(:disabled) { transform: translateY(0); }
.btn:disabled, .ui-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.go-btn { width: 52px; height: 52px; min-height: 52px; padding: 0; flex: 0 0 52px; }
.ui-card, .change-card, .home-update, .additive-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.field, .search-field, .ui-field { flex: 1; min-width: 0; padding-inline: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700; outline: none; transition: border-color .15s; }
.field:not(textarea), .search-field, .ui-field:not(textarea) { height: 52px; }
.field:focus, .search-field:focus, .ui-field:focus { border-color: var(--green); }
input[type="text"], input[type="search"], input[type="number"], textarea, select { border-color: var(--border); border-radius: var(--r-md); }
.ui-field:focus-visible, input[type="text"]:focus-visible, input[type="search"]:focus-visible, input[type="number"]:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.ui-field::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.page-head h1, .legal-wrap h1, .main h1 { font-size: var(--type-page-title); line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; }
.legal-section h2 { font-size: 18px; line-height: 1.35; }
.change-card h2 { font-size: var(--type-card-title); }

@media (max-width: 900px) {
  .site-shell-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .container, .wrap { padding-inline: 18px; }
  .site-shell-nav, .site-shell-cta { display: none !important; }
  .site-shell-toggle { display: block; }
  .site-shell-mobile:not([hidden]) { display: flex; }
}
@media (max-width: 480px) {
  .site-shell-footer { padding-block: 42px 26px; }
  .site-shell-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .site-shell-footer__bottom { margin-top: 30px; }
}
@media (max-width: 360px) {
  :root { --type-page-title: 24px; }
}