/* ============================================================
 * Moderis — voedingscoach. Forest-thema (licht, warm crème).
 * Rooted in BouwGrid type/spacing foundation (DM Sans + DM Mono),
 * recolored to Forest e-bike greens on a warm cream canvas.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  --m-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --m-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Warm cream canvas */
  --m-bg:        #efeae0;   /* page */
  --m-bg-2:      #e9e3d6;   /* deeper cream */
  --m-card:      #fdfbf6;   /* warm white surface */
  --m-card-2:    #f6f2e9;   /* subtle fill / hover */
  --m-card-3:    #efe9dc;   /* deeper fill */

  /* Forest greens */
  --forest-950:  #122a1d;   /* darkest — hero, deep ink */
  --forest-900:  #173726;
  --forest-800:  #1c4630;
  --forest-700:  #235139;   /* primary actions */
  --forest-600:  #2c6646;
  --forest-500:  #3a7d57;   /* mid / protein */
  --forest-400:  #5a9b73;
  --forest-300:  #8cbf9c;
  --forest-200:  #c1ddc9;
  --forest-100:  #e1eee5;

  /* Fresh leaf accent (Forest's bright green) */
  --leaf:        #8bc24a;
  --leaf-deep:   #6fa23a;
  --leaf-soft:   rgba(139, 194, 74, 0.16);

  /* Warm earthy macro hues (natural, premium) */
  --macro-protein: #2f7d52;            /* groen  */
  --macro-protein-bg: rgba(47,125,82,0.14);
  --macro-carb:    #c79133;            /* okergeel */
  --macro-carb-bg: rgba(199,145,51,0.16);
  --macro-fat:     #c06a44;            /* klei/terracotta */
  --macro-fat-bg:  rgba(192,106,68,0.16);

  /* Ink scale (warm, faintly green) */
  --ink:   #21271f;
  --ink-2: #5f6657;
  --ink-3: #999e8f;
  --on-forest: #f3f1e7;       /* text on dark green */
  --on-forest-2: rgba(243,241,231,0.62);

  --m-line:   rgba(30,40,25,0.09);    /* hairline */
  --m-line-2: rgba(30,40,25,0.16);

  --m-shadow:    0 2px 10px rgba(30,40,25,0.06);
  --m-shadow-md: 0 12px 30px rgba(30,40,25,0.10);
  --m-shadow-lg: 0 24px 60px rgba(30,40,25,0.14);

  --m-r-sm: 12px;
  --m-r-md: 16px;
  --m-r-lg: 22px;
  --m-r-xl: 28px;
  --m-pill: 999px;
}

/* ---- Phone shell (a Moderis screen sits inside one of these) ---- */
.moderis {
  font-family: var(--m-font);
  color: var(--ink);
  background: var(--m-bg);
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
  position: relative;
  display: flex;
  flex-direction: column;
}
.moderis * { box-sizing: border-box; }
.moderis .num { font-family: var(--m-mono); font-variant-numeric: tabular-nums; }

/* Status bar */
.m-status {
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 26px 8px;
  font-family: var(--m-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.m-status .m-status-icons { display: flex; align-items: center; gap: 7px; font-size: 14px; }

/* Scroll body — fills remaining height; scrollbar hidden by canvas css */
.m-screen { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; }

/* Eyebrow / whisper label */
.m-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}

/* Generic pill */
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--m-pill);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  line-height: 1;
  white-space: nowrap;
}
.m-badge .num { font-size: 11.5px; font-weight: 500; }

/* Macro mini-badge */
.m-macro-badge { font-family: var(--m-mono); font-weight: 500; }
.m-mb-p { color: var(--macro-protein); background: var(--macro-protein-bg); }
.m-mb-c { color: #9a6f17; background: var(--macro-carb-bg); }
.m-mb-f { color: var(--macro-fat); background: var(--macro-fat-bg); }

/* Tonal labels */
.m-label-protein { color: var(--macro-protein); background: var(--macro-protein-bg); }
.m-label-light   { color: var(--forest-600); background: var(--forest-100); }
.m-label-fiber   { color: #8a6a12; background: var(--macro-carb-bg); }
.m-label-omega   { color: #356f8a; background: rgba(53,111,138,0.14); }

/* Buttons */
.m-btn {
  border: none;
  font-family: var(--m-font);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--m-pill);
  transition: background .14s, color .14s, transform .1s;
}
.m-btn-primary { background: var(--forest-700); color: var(--on-forest); }
.m-btn-ghost   { background: var(--m-card-2); color: var(--ink); border: 1px solid var(--m-line); }
.m-btn-leaf    { background: var(--leaf); color: var(--forest-950); }

/* Progress track */
.m-track { background: rgba(30,40,25,0.10); border-radius: var(--m-pill); overflow: hidden; }
.m-fill  { height: 100%; border-radius: var(--m-pill); }

/* Hairline divider */
.m-hr { height: 1px; background: var(--m-line); border: 0; margin: 0; }

/* FA icon sizing helper */
.moderis .fa-fw { width: 1.1em; }