/* ==========================================================================
   LeanLiver Design System
   Montserrat type, midnight-blue surface, azure accent, pill buttons,
   rounded glow cards, 10px spacing scale, 12-col grid, fixed bottom nav,
   plus the liver traffic-light palette (green/amber/red), activity rings,
   habit/streak badges and safety callouts.

   Tokens live in :root as CSS custom properties so the marketing website and
   the PWA webapp can share one source of truth. Production should self-host
   the Montserrat woff2 files instead of using Google Fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --c-midnight:        #051229;  /* primary surface / app background        */
  --c-midnight-tint:   #0A2445;  /* raised surface / cards on midnight      */
  --c-navy:            #0E3360;  /* primary button fill                     */
  --c-slate:           #355D8E;  /* muted / social                          */
  --c-azure:           #0092D3;  /* primary accent, focus, links            */
  --c-white:           #FFFFFF;
  --c-black:           #000000;

  /* Liver traffic-light palette — LeanLiver addition.
     The whole food experience (US-03) hinges on these three. */
  --c-green:           #22B07A;  /* liver-friendly / "green meal" / go      */
  --c-green-soft:      rgba(34, 176, 122, 0.15);
  --c-amber:           #F5B700;  /* caution / eat occasionally              */
  --c-amber-soft:      rgba(245, 183, 0, 0.15);
  --c-red:             #E9473F;  /* avoid / high liver load*/
  --c-red-soft:        rgba(233, 71, 63, 0.15);
  --c-orange:          #FF7F30;  /* warning accent                  */

  /* Three daily rings (Today Dashboard) */
  --c-ring-eat:        var(--c-green);   /* Eat Clean   */
  --c-ring-move:       var(--c-azure);   /* Move        */
  --c-ring-recover:    var(--c-orange);  /* Recover     */

  /* Semantic roles */
  --c-text:            var(--c-white);
  --c-text-muted:      rgba(255, 255, 255, 0.7);
  --c-text-faint:      rgba(255, 255, 255, 0.4);
  --c-success:         var(--c-green);
  --c-info:            var(--c-azure);
  --c-warning:         var(--c-amber);
  --c-danger:          var(--c-red);
  --c-disabled:        #D4D2C8;
  --c-border:          rgba(0, 146, 211, 0.25); /* hairline azure          */

  /* Typography */
  --font-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-root: 17px;      /* all % font-sizes resolve against this            */
  --lh-base: 1.4;
  --fw-thin: 100;
  --fw-light: 300;      /* body default                                    */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Radii — pill buttons, rounded fields & cards */
  --radius-pill: 27px;
  --radius-field: 15px;
  --radius-card: 20px;

  /* Spacing base unit (scale is multiples of this) */
  --space: 10px;

  /* Motion */
  --transition: all 0.2s linear;
  --transition-slow: all 0.4s linear;

  /* Layout breakpoints (reference only; used in media queries below)
     sm 640 · mid 940 · lg 1200 */
}

/* --------------------------------------------------------------------------
   2. Reset & base (condensed Meyer reset)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--c-text);
  background-color: var(--c-midnight);
  font-family: var(--font-base);
  font-size: var(--fs-root);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin: 0 0 20px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
h1, .h1 { font-size: 166.667%; }
h2, .h2 { font-size: 144.444%; }
h3, .h3 { font-size: 116.667%; }
h4, .h4 { font-size: 116.667%; }
h5, .h5 { font-size: 105.556%; }
h6, .h6 { font-size: 88.889%; }

@media (min-width: 940px) {
  h1, .h1 { font-size: 222.222%; }
  h2, .h2 { font-size: 166.667%; }
  h3, .h3 { font-size: 133.333%; }
  h4, .h4 { font-size: 105.556%; }
  h5, .h5 { font-size: 94.444%; }
  h6, .h6 { font-size: 88.889%; }
}

.heading-mega { font-size: 166.667%; line-height: 1.1; }
.heading-xl   { font-size: 200%;     line-height: 1.1; }
@media (min-width: 640px) {
  .heading-mega { font-size: 500%; }
  .heading-xl   { font-size: 255.556%; }
}
@media (min-width: 1200px) {
  .heading-mega { font-size: 688.889%; }
  .heading-xl   { font-size: 300%; }
}

p { margin: 0 0 30px; }

a, .link {
  color: var(--c-azure);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
a:hover, .link:hover { color: var(--c-text); }
a:focus, .link:focus { outline: none; }

strong, b { font-weight: var(--fw-bold); }
em, i { font-style: italic; }

ul, ol { margin: 0 0 30px; padding-left: 30px; list-style-position: inside; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
ul li, ol li { margin-bottom: 10px; }
.list-reset { margin: 0; padding: 0; list-style: none; }
.list-reset li { margin: 0; }

/* Font-size helpers */
.font-size-base { font-size: var(--fs-root); }
.font-size-sm   { font-size: 88.889%; }
.font-size-xs   { font-size: 77.778%; }
.font-size-xxs  { font-size: 66.667%; }

/* Weight helpers */
.font-thin    { font-weight: var(--fw-thin); }
.font-light   { font-weight: var(--fw-light); }
.font-regular { font-weight: var(--fw-regular); }
.font-medium  { font-weight: var(--fw-medium); }
.font-bold    { font-weight: var(--fw-bold); }

/* Text utilities */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-underline { text-decoration: underline; }
.font-italic { font-style: italic; }

.text-muted  { color: var(--c-text-muted); }
.text-faint  { color: var(--c-text-faint); }

/* Color text/background helpers (generated from the palette) */
.c-azure    { color: var(--c-azure); }
.c-green    { color: var(--c-green); }
.c-amber    { color: var(--c-amber); }
.c-red      { color: var(--c-red); }
.c-white    { color: var(--c-white); }
.bg-midnight      { background-color: var(--c-midnight); }
.bg-midnight-tint { background-color: var(--c-midnight-tint); }
.bg-navy          { background-color: var(--c-navy); }
.bg-azure         { background-color: var(--c-azure); }

/* --------------------------------------------------------------------------
   4. Spacing scale  (.spacing-{n}[-{side}])  n = half,1..10  → 5px..100px
   Direction suffixes: -h -v -t -b -l -r
   -------------------------------------------------------------------------- */
.spacing      { padding: var(--space); }
.spacing-h    { padding-left: var(--space); padding-right: var(--space); }
.spacing-v    { padding-top: var(--space); padding-bottom: var(--space); }
.spacing-t    { padding-top: var(--space); }
.spacing-b    { padding-bottom: var(--space); }
.spacing-l    { padding-left: var(--space); }
.spacing-r    { padding-right: var(--space); }

.spacing-half   { padding: 5px; }
.spacing-half-v { padding-top: 5px; padding-bottom: 5px; }
.spacing-half-h { padding-left: 5px; padding-right: 5px; }

.spacing-2   { padding: 20px; }
.spacing-2-v { padding-top: 20px; padding-bottom: 20px; }
.spacing-2-h { padding-left: 20px; padding-right: 20px; }
.spacing-3   { padding: 30px; }
.spacing-3-v { padding-top: 30px; padding-bottom: 30px; }
.spacing-3-h { padding-left: 30px; padding-right: 30px; }
.spacing-4   { padding: 40px; }
.spacing-4-v { padding-top: 40px; padding-bottom: 40px; }
.spacing-5   { padding: 50px; }
.spacing-5-v { padding-top: 50px; padding-bottom: 50px; }
.spacing-6-v { padding-top: 60px; padding-bottom: 60px; }
.spacing-8-v { padding-top: 80px; padding-bottom: 80px; }
.spacing-10-v{ padding-top: 100px; padding-bottom: 100px; }

/* margin resets */
.margin-reset { margin: 0; }
.margin-bottom-reset { margin-bottom: 0; }
.padding-reset { padding: 0; }
.margin-auto { margin: auto; }
.margin-left-auto { margin-left: auto; }
.margin-right-auto { margin-right: auto; }

/* --------------------------------------------------------------------------
   5. Layout — containers, grid, flex
   -------------------------------------------------------------------------- */
.container-xl, .container-lg, .container-mid, .container-sm, .container-full {
  margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
}
.container-xl  { max-width: 1500px; }
.container-lg  { max-width: 1200px; }
.container-mid { max-width: 940px; }
.container-sm  { max-width: 640px; }
@media (min-width: 940px) {
  .container-xl, .container-lg, .container-mid, .container-sm, .container-full {
    padding-left: 40px; padding-right: 40px;
  }
}

.row { margin-left: -15px; margin-right: -15px; }
.col { padding-left: 15px; padding-right: 15px; }

.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

@media (min-width: 640px) {
  .col-3-sm { width: 25%; }  .col-4-sm { width: 33.3333%; }
  .col-6-sm { width: 50%; }  .col-8-sm { width: 66.6667%; }
}
@media (min-width: 940px) {
  .col-3-mid { width: 25%; } .col-4-mid { width: 33.3333%; }
  .col-6-mid { width: 50%; } .col-8-mid { width: 66.6667%; }
}

.flex { display: flex; flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-column { flex-direction: column; }
.flex-1 { flex: 1; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-justify-center { justify-content: center; }
.flex-justify-between { justify-content: space-between; }
.flex-justify-end { justify-content: flex-end; }
.flex-align-center { align-items: center; }
.flex-align-end { align-items: flex-end; }
.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }

/* visibility helpers */
.show { display: block; }
.hide { display: none; }
@media (max-width: 939.5px) { .hide-media-mid-max { display: none; } }
@media (min-width: 940px)   { .hide-media-mid { display: none; } }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Buttons — pill shape
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: 88.889%;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  cursor: pointer;
  transition: var(--transition);
}
.btn:focus { outline: none; }
@media (min-width: 640px) { .btn { padding: 11px 30px; } }

/* Primary — navy fill */
.btn--primary {
  color: var(--c-white);
  background-color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn--primary:hover { background-color: #0b274a; border-color: #0b274a; }

/* Accent — azure fill (strong CTA: Log Meal, Start Walk) */
.btn--accent {
  color: var(--c-white);
  background-color: var(--c-azure);
  border-color: var(--c-azure);
}
.btn--accent:hover { background-color: #007ab0; border-color: #007ab0; }

/* Positive — green fill (reinforce healthy choices) */
.btn--green {
  color: var(--c-white);
  background-color: var(--c-green);
  border-color: var(--c-green);
}
.btn--green:hover { background-color: #1c9767; border-color: #1c9767; }

/* Outline */
.btn--outline {
  color: var(--c-white);
  background-color: transparent;
  border-color: var(--c-azure);
}
.btn--outline:hover { color: var(--c-text-muted); }

.btn--sm { font-size: 77.778%; min-height: 40px; padding: 8px 18px; }
.btn--full-width { display: block; width: 100%; }
.btn--disabled, .btn:disabled { opacity: 0.3; pointer-events: none; }

/* icon buttons */
.btn--icon { display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-field { margin-bottom: 25px; }
.label { display: block; margin-bottom: 15px; font-size: 88.889%; }

.form-text {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 15px;
  color: var(--c-white);
  background-color: var(--c-midnight);
  border: 1px solid var(--c-azure);
  border-radius: var(--radius-field);
  font-family: var(--font-base);
  font-size: var(--fs-root);
  line-height: 1.4;
  transition: var(--transition);
}
.form-text:focus { outline: 0; border-color: var(--c-azure); }
.form-text::placeholder { color: var(--c-text-faint); }
textarea.form-text { min-height: 120px; }

.form-text--select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230092D3' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

input[type="radio"], input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--c-azure);
  vertical-align: middle;
}

.form--error { border-color: var(--c-red) !important; }
.form-help-text { margin: 10px 0 0; font-size: 88.889%; font-weight: var(--fw-medium); }
.form-help-text--error { color: var(--c-red); }
.form-info-text { color: var(--c-text-faint); font-size: 66.667%; }

/* --------------------------------------------------------------------------
   8. Cards — rounded panel with hover glow border
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: block;
  margin-bottom: 20px;
  padding: 20px;
  background-color: var(--c-midnight-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  overflow: hidden;
  transition: var(--transition-slow);
}
.card:hover { border-color: var(--c-azure); }
@media (min-width: 940px) { .card { padding: 30px; border-radius: var(--radius-card); } }

.card--glow:hover { box-shadow: 0 0 24px rgba(0, 146, 211, 0.35); }
.card > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Notices — inline notify + full safety/disclaimer callout
   -------------------------------------------------------------------------- */
.notify {
  margin: 0 0 20px;
  padding: 12px 15px;
  border: 2px solid var(--c-azure);
  border-radius: var(--radius-field);
  background-color: rgba(0, 146, 211, 0.15);
}
.notify--success { border-color: var(--c-green); background-color: var(--c-green-soft); }
.notify--warning { border-color: var(--c-amber); background-color: var(--c-amber-soft); }
.notify--error   { border-color: var(--c-red);   background-color: var(--c-red-soft); }

/* Safety / medical disclaimer — required across onboarding, PDF & Learn.
   Deliberately understated and non-alarming (brief: compassionate, no diagnosis). */
.disclaimer {
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-amber);
  border-radius: var(--radius-field);
  background-color: var(--c-midnight-tint);
  color: var(--c-text-muted);
  font-size: 88.889%;
  line-height: 1.5;
}
.disclaimer strong { color: var(--c-text); }

/* --------------------------------------------------------------------------
   10. Liver traffic-light food components (US-03)
   -------------------------------------------------------------------------- */
.light-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 77.778%;
  font-weight: var(--fw-medium);
  text-transform: capitalize;
}
.light-tag::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}
.light-tag--green { color: var(--c-green); background-color: var(--c-green-soft); }
.light-tag--amber { color: var(--c-amber); background-color: var(--c-amber-soft); }
.light-tag--red   { color: var(--c-red);   background-color: var(--c-red-soft); }

/* Meal card: traffic light + one-line reason + swap suggestion */
.meal-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--c-midnight-tint);
  border: 1px solid var(--c-border);
}
.meal-card__bar { height: 4px; }
.meal-card--green .meal-card__bar { background-color: var(--c-green); }
.meal-card--amber .meal-card__bar { background-color: var(--c-amber); }
.meal-card--red   .meal-card__bar { background-color: var(--c-red); }
.meal-card__body { padding: 18px 20px; }
.meal-card__reason { color: var(--c-text-muted); font-size: 88.889%; margin: 10px 0 0; }
.meal-card__swap {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--c-border);
  font-size: 88.889%;
}
.meal-card__swap b { color: var(--c-green); }

/* --------------------------------------------------------------------------
   11. Activity rings (Today Dashboard: Eat Clean · Move · Recover)
   Pure-CSS conic ring; set --pct (0-100) and --ring-color inline.
   -------------------------------------------------------------------------- */
.ring {
  --pct: 0;
  --ring-color: var(--c-azure);
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring-color) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background-color: var(--c-midnight);
}
.ring__label {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 77.778%;
  font-weight: var(--fw-medium);
}
.ring--eat     { --ring-color: var(--c-ring-eat); }
.ring--move    { --ring-color: var(--c-ring-move); }
.ring--recover { --ring-color: var(--c-ring-recover); }

/* --------------------------------------------------------------------------
   12. Badges — Liver Points & streaks (gamification, US-06/US-08)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 77.778%;
  font-weight: var(--fw-medium);
  background-color: rgba(255, 255, 255, 0.08);
}
.badge--points { color: var(--c-azure); }
.badge--streak { color: var(--c-orange); }

/* --------------------------------------------------------------------------
   13. Circle icon & loading spinner
   -------------------------------------------------------------------------- */
.circle-icon {
  display: flex; align-items: center; justify-content: center;
  width: 49px; height: 49px; border-radius: 50%;
  background-color: var(--c-white); color: var(--c-midnight);
}
.spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--c-azure);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* small glowing accent dot */
.glow-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background-color: var(--c-azure);
  animation: glow-pulse 2.5s infinite linear both;
}
@keyframes glow-pulse {
  0%,100% { filter: blur(2px); transform: scale(1); opacity: 0.5; }
  40%     { filter: blur(3px); transform: scale(0.9); opacity: 0.7; }
  80%     { filter: blur(4px); transform: scale(1.1); opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   14. Bottom navigation (webapp) — Home · Eat · Move · Learn · You
   Fixed bottom nav-block pattern (max 440px, centered).
   -------------------------------------------------------------------------- */
.bottom-nav {
  position: sticky;      /* use position: fixed in the real app */
  bottom: 20px;
  left: 0; right: 0;
  margin: 0 auto;
  max-width: 440px;
  display: flex;
  justify-content: space-between;
  padding: 10px 8px;
  background-color: var(--c-midnight-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: var(--c-text-faint);
  font-size: 61%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
}
.bottom-nav__item:hover { color: var(--c-text-muted); }
.bottom-nav__item.is-active { color: var(--c-azure); }
.bottom-nav__dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor;
}