/* ===========================================================================
   One Life Meals — design system
   ---------------------------------------------------------------------------
   Two typefaces, both self-hosted variable woff2: Fraunces for display, Inter
   for everything else. Two surfaces: warm paper and deep forest. The brand
   lime is a FILL, never text on light — it measures 2.20:1 on white, which
   fails even the 3:1 non-text floor. Every colour pair used here was checked.
   =========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: optional;
  font-style: normal;
}
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: optional;
  font-style: normal;
}

:root {
  /* --- surfaces ------------------------------------------------------- */
  --paper:      #FBFAF6;
  --paper-2:    #F2F0E8;
  --paper-3:    #E8E5D9;
  --white:      #FFFFFF;
  --forest:     #1B2A16;
  --forest-2:   #2C4423;

  /* --- ink ------------------------------------------------------------ */
  --ink:        #14180F;   /* 17.23:1 on paper */
  --ink-2:      #3A4235;   /* 10.00:1 */
  --muted:      #5F6858;   /*  5.57:1 — lightest legal body text on paper */

  /* --- brand ---------------------------------------------------------- */
  --lime:       #8CBE3F;   /* FILL ONLY on light. 6.88:1 as text on forest. */
  --lime-soft:  #DCEBBF;
  --forest-ink: #3E592C;   /* 7.53:1 on paper — the green you may set as text */
  --accent:     #C2501C;   /* price / buy. 4.71:1 with white on it.          */
  --accent-ink: #A84417;   /* 5.74:1 on paper — accent as text               */
  --accent-soft:#FBE8DF;

  /* --- lines: >=3:1 where they carry meaning (inputs, focus) ---------- */
  --line:       #E2E3DC;   /* decorative hairlines only */
  --line-2:     #CFD2C6;
  --line-input: #7C856F;   /* 3.7:1 — SC 1.4.11 safe for form borders */

  --ok:         #2F6B3A;
  --warn:       #8A5A00;
  --err:        #A3231B;

  /* --- type ----------------------------------------------------------- */
  --sans: 'InterVar', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

  /* fluid scale, 320 -> 1440 */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.30vw + 1.00rem, 1.1875rem);
  --t-lg:   clamp(1.25rem,  0.60vw + 1.10rem, 1.5rem);
  --t-xl:   clamp(1.5rem,   1.20vw + 1.20rem, 2.125rem);
  --t-2xl:  clamp(2rem,     2.60vw + 1.35rem, 3.25rem);
  --t-3xl:  clamp(2.5rem,   4.40vw + 1.40rem, 4.75rem);
  --t-4xl:  clamp(3rem,     6.20vw + 1.45rem, 6.25rem);

  /* --- space / shape -------------------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,24,15,.05), 0 2px 8px rgba(20,24,15,.04);
  --shadow-md: 0 2px 6px rgba(20,24,15,.06), 0 12px 28px rgba(20,24,15,.07);
  --shadow-lg: 0 6px 16px rgba(20,24,15,.08), 0 28px 60px rgba(20,24,15,.12);
  --shadow-plate: 0 18px 40px rgba(20,24,15,.18);

  --wrap: 1240px;
  --wrap-narrow: 760px;
  --header-h: 68px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ===== reset ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* SC 2.4.11: anchored content must not hide under the sticky header */
  scroll-padding-top: calc(var(--header-h) + 16px);
  scroll-padding-bottom: 96px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
a { color: var(--forest-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

/* Double focus ring: a dark-only ring disappears on the forest button and a
   white-only ring disappears on lime, so both are drawn every time. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #12310B;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #FFFFFF;
  border-radius: 4px;
}
.on-dark :where(a, button, [tabindex]):focus-visible {
  outline-color: #E9F5D4;
  box-shadow: 0 0 0 5px rgba(0,0,0,.65);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* ===== layout =========================================================== */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 560px) { .wrap, .wrap-narrow { width: calc(100% - 2rem); } }

.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.on-dark { background: var(--forest); color: var(--paper); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark a { color: var(--lime); }
.on-dark .muted { color: #B9C4AE; }
.tint { background: var(--paper-2); }

/* ===== type helpers ===================================================== */
.display {
  font-family: var(--disp);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 100;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
.h1 { font-size: var(--t-3xl); }
.h2 { font-size: var(--t-2xl); }
.h3 { font-size: var(--t-xl); }
.lede { font-size: var(--t-md); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest-ink);
}
.on-dark .eyebrow { color: var(--lime); }
.eyebrow::before {
  content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}

/* ===== buttons ========================================================== */
.btn {
  --btn-bg: var(--forest-ink);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--t-base); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .45; pointer-events: none; transform: none; box-shadow: none;
}
.btn-accent { --btn-bg: var(--accent); }
.btn-lime   { --btn-bg: var(--lime); --btn-fg: var(--ink); }  /* ink on lime = 8.18:1 */
.btn-ghost  { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); }
.on-dark .btn-ghost { --btn-fg: var(--white); border-color: rgba(255,255,255,.35); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* The hero is a dark surface but is not .on-dark, so a ghost button there was
   inheriting dark ink on a dark backdrop and disappearing. It also sits over
   VIDEO, where a fully transparent fill can land on a bright frame — so give
   it its own translucent ground rather than relying on the scrim. */
.hero .btn-ghost {
  --btn-fg: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.8); }
.hero :where(a, button):focus-visible {
  outline-color: #E9F5D4;
  box-shadow: 0 0 0 5px rgba(0,0,0,.65);
}
.btn-lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--t-md); }
.btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--t-sm); }
.btn-block { width: 100%; }

/* ===== chips / badges =================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 34px; padding: 0 var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.chip:hover { border-color: var(--forest-ink); }
.chip[aria-pressed='true'], .chip.is-on {
  background: var(--forest-ink); border-color: var(--forest-ink); color: var(--white);
}
.chip .count { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.tag-tier   { background: var(--lime-soft); color: #2C4A0E; }
.tag-life   { background: #DFEAF3; color: #1C3E58; }
.tag-break  { background: #F6E6C9; color: #5A4210; }
.tag-snack  { background: var(--accent-soft); color: #7A300E; }
.tag-sale   { background: var(--accent); color: var(--white); }

/* ===== meal card ======================================================== */
.meal-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
@media (max-width: 640px) {
  .meal-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}
@media (max-width: 400px) { .meal-grid { grid-template-columns: 1fr; } }

.meal {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.meal:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.meal[hidden] { display: none; }

.meal-media {
  position: relative; background: var(--paper-2);
  aspect-ratio: 1100 / 722;
}
.meal-media img { width: 100%; height: 100%; object-fit: cover; }
.meal-badges {
  position: absolute; inset-inline-start: var(--sp-3); inset-block-start: var(--sp-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
}
.meal-code {
  position: absolute; inset-inline-end: var(--sp-3); inset-block-start: var(--sp-3);
  background: rgba(20,24,15,.72); color: var(--white);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em;
  padding: 3px 8px; border-radius: var(--r-sm);
}
.meal-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); flex: 1; }
.meal-name {
  font-size: var(--t-base); font-weight: 650; line-height: 1.25;
  letter-spacing: -0.01em; margin: 0;
}
.meal-name a { color: inherit; text-decoration: none; }
.meal-name a:hover { text-decoration: underline; }

/* four numbers, always visible, never behind a click */
.macros {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden; background: var(--line);
}
.macro { background: var(--paper); padding: 6px 4px; text-align: center; }
.macro b { display: block; font-size: var(--t-sm); font-weight: 700; line-height: 1.2; }
.macro span { display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

.macro-bar {
  display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line);
}
.macro-bar i { display: block; height: 100%; }
.macro-bar i + i { border-inline-start: 1.5px solid var(--white); }
.mb-p { background: #3E592C; }
.mb-c { background: #C9A227; }
.mb-f { background: #C2501C; }

.allergens { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--t-sm); }
.allergen {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--line-2);
}
.allergen[data-sev='may_contain'] { border-style: dashed; color: var(--muted); }

.meal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-1);
}
.price { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.02em; }
.price s { font-size: var(--t-sm); font-weight: 500; color: var(--muted); margin-inline-start: 6px; }

/* price pill -> stepper, swapped in place so nothing moves */
.add {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; min-width: 44px; padding: 0 var(--sp-4);
  background: var(--accent); color: var(--white);
  border: 0; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--t-sm); cursor: pointer;
  transition: background-color .15s var(--ease), transform .12s var(--ease);
}
.add:hover { background: var(--accent-ink); }
.add:active { transform: scale(.97); }
.stepper {
  display: none; align-items: center; gap: 0;
  background: var(--forest-ink); border-radius: var(--r-pill); color: var(--white);
}
.stepper button {
  min-width: 44px; min-height: 44px;
  background: transparent; border: 0; color: inherit;
  font-size: var(--t-md); font-weight: 700; cursor: pointer; border-radius: var(--r-pill);
}
.stepper button:hover { background: rgba(255,255,255,.14); }
.stepper output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.meal.in-cart .add { display: none; }
.meal.in-cart .stepper { display: inline-flex; }
.meal.in-cart { border-color: var(--forest-ink); box-shadow: inset 0 0 0 1px var(--forest-ink); }

/* ===== forms ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field > label { font-weight: 600; font-size: var(--t-sm); }
.field .hint { font-size: var(--t-sm); color: var(--muted); }
.field .err { font-size: var(--t-sm); color: var(--err); font-weight: 600; }
.input, .select, .textarea {
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-input); border-radius: var(--r-md);
  width: 100%;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--forest-ink); }
.input[aria-invalid='true'] { border-color: var(--err); border-width: 2px; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
legend { font-weight: 700; font-size: var(--t-sm); padding: 0; margin-bottom: var(--sp-3); }

/* radio/checkbox as selectable cards */
.opts { display: grid; gap: var(--sp-3); }
.opts-row { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 620px) { .opts-row { grid-auto-flow: row; } }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt > span {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 56px; padding: var(--sp-3) var(--sp-4);
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-md);
  justify-content: center; transition: border-color .14s var(--ease), background-color .14s var(--ease);
}
.opt b { font-weight: 650; }
.opt em { font-style: normal; font-size: var(--t-sm); color: var(--muted); }
.opt input:hover + span { border-color: var(--forest-ink); }
.opt input:checked + span {
  border-color: var(--forest-ink); border-width: 2px; padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px);
  background: #F4F8EC;
}
.opt input:focus-visible + span { outline: 3px solid #12310B; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }

/* ===== cards / panels =================================================== */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.card-pad-lg { padding: var(--sp-6); }
.panel { background: var(--paper-2); border-radius: var(--r-lg); padding: var(--sp-5); }

.grid-2 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ===== tables =========================================================== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th, table.data td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-weight: 700; background: var(--paper-2); white-space: nowrap; }
table.data tbody tr:hover { background: var(--paper); }

/* ===== notices ========================================================== */
.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--white);
  font-size: var(--t-sm);
}
.notice-ok   { border-color: #A9CDAE; background: #EFF7EF; }
.notice-warn { border-color: #E0C68A; background: #FCF6E8; }
.notice-err  { border-color: #E3AEA9; background: #FCEFEE; }
.notice b { display: block; margin-bottom: 2px; }

/* ===== utilities ======================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.nowrap { white-space: nowrap; }
.full { width: 100%; }