/* ============================================================
   PEPTINO — refined LIGHT design system
   Companion to DESIGN_SYSTEM.md. Fixes the light-mode accent
   incoherence: accent is expressed as FILLS + a dedicated AA
   "ink" role for text/icons — never raw lime as text on white.
   Three accent themes switch via [data-accent].
   ============================================================ */

/* ---------- Neutrals (refined light) ---------- */
:root {
  /* canvas + surfaces — cards lift off a faintly cool off-white */
  --bg:            #FAFBFC;
  --surface:       #FFFFFF;
  --surface-2:     #F6F8FA;   /* inputs / nested wells */
  --sunken:        #EDF0F4;   /* chart bg, segmented track, gauges */
  --border:        #E7EAEF;
  --border-strong: #D4D8E0;

  --text-1: #14161B;          /* primary */
  --text-2: #565D6B;          /* secondary  ~7:1 */
  --text-3: #838A98;          /* muted — captions/hints only */

  /* status (AA on white) */
  --success:      #15803D;  --success-fill: #16A34A;  --success-soft: #DCFAE7;
  --warning:      #92600A;  --warning-fill: #E5A50A;  --warning-soft: #FBEFCF;
  --danger:       #C62B36;  --danger-fill:  #E5484D;  --danger-soft:  #FBE2E3;
  --info:         #1762C4;  --info-fill:    #2B7FFF;  --info-soft:    #DEEBFF;

  /* shadows — soft neutral, light theme */
  --shadow-card: 0 1px 2px rgba(20,22,27,.04), 0 6px 20px rgba(20,22,27,.06);
  --shadow-pop:  0 8px 30px rgba(20,22,27,.12);

  /* radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* category tints (AA text + soft bg) */
  --cat-recovery:  #15803D;  --cat-recovery-bg:  #DCFAE7;
  --cat-fatloss:   #92600A;  --cat-fatloss-bg:   #FBEFCF;
  --cat-cognitive: #6D28D9;  --cat-cognitive-bg: #EDE6FE;
  --cat-longevity: #0E7490;  --cat-longevity-bg: #D5F2F6;
  --cat-muscle:    #4F7A12;  --cat-muscle-bg:    #ECF7CF;
  --cat-skincare:  #1762C4;  --cat-skincare-bg:  #DEEBFF;

  /* accent — lime (light): fill + AA-safe ink for text/icons */
  --accent:      #C4F23D;
  --accent-fg:   #15200A;
  --accent-ink:  #4F7A12;   /* deep lime-green, 4.8:1 on white */
  --accent-soft: #ECF7CF;
  --accent-line: #D6EE9A;
  --accent-glow: rgba(196,242,61,.50);
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
  --bg:#0A0A0B; --surface:#15161A; --surface-2:#1D1E22; --sunken:#0E0F11;
  --border:#272930; --border-strong:#3A3C42;
  --text-1:#F4F6F7; --text-2:#A1A4AD; --text-3:#6E7480;

  --success:#46E08A; --success-fill:#46E08A; --success-soft:rgba(70,224,138,.16);
  --warning:#F5B73E; --warning-fill:#F5B73E; --warning-soft:rgba(245,183,62,.16);
  --danger:#FF5A5F;  --danger-fill:#FF5A5F;  --danger-soft:rgba(255,90,95,.16);
  --info:#5AB0FF;    --info-fill:#5AB0FF;    --info-soft:rgba(90,176,255,.16);

  --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.34);
  --shadow-pop:  0 12px 38px rgba(0,0,0,.55);

  --cat-recovery:#46E08A;  --cat-recovery-bg:rgba(70,224,138,.15);
  --cat-fatloss:#F5B73E;   --cat-fatloss-bg:rgba(245,183,62,.15);
  --cat-cognitive:#B57BFF; --cat-cognitive-bg:rgba(181,123,255,.16);
  --cat-longevity:#2FD9E6; --cat-longevity-bg:rgba(47,217,230,.15);
  --cat-muscle:#C4F23D;    --cat-muscle-bg:rgba(196,242,61,.15);
  --cat-skincare:#5AB0FF;  --cat-skincare-bg:rgba(90,176,255,.15);

  /* accent — lime reads as ink directly on near-black */
  --accent:#C4F23D; --accent-fg:#0A0A0B; --accent-ink:#C4F23D;
  --accent-soft:rgba(196,242,61,.16); --accent-line:rgba(196,242,61,.30);
  --accent-glow:rgba(196,242,61,.42);
}

/* ---------- Accent themes ----------
   --accent       solid fill (CTA, ring, bar, + button)
   --accent-fg    text/icon ON an accent fill
   --accent-ink   accent as TEXT/ICON on a surface (AA-safe)
   --accent-soft  tint background (chips, selected rows)
   --accent-line  hairline accent on tints
   --accent-glow  CTA / + button glow                              */

/* ---------- Type ---------- */
.pt, .pt * { box-sizing: border-box; }
.pt {
  font-family: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.t-display { font-family:'Bricolage Grotesque'; font-weight:800; font-size:33px; line-height:38px; letter-spacing:-.5px; }
.t-title   { font-family:'Bricolage Grotesque'; font-weight:700; font-size:27px; line-height:32px; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.t-heading { font-family:'Bricolage Grotesque'; font-weight:700; font-size:19px; line-height:24px; letter-spacing:-.2px; }
.t-bodyLg  { font-weight:500; font-size:16px; line-height:23px; }
.t-body    { font-weight:400; font-size:15px; line-height:22px; }
.t-strong  { font-weight:600; font-size:15px; line-height:22px; }
.t-label   { font-weight:700; font-size:11px; line-height:15px; letter-spacing:1.3px; text-transform:uppercase; }
.t-caption { font-weight:500; font-size:12px; line-height:16px; }
.num       { font-variant-numeric: tabular-nums; }

.c-1 { color: var(--text-1); } .c-2 { color: var(--text-2); } .c-3 { color: var(--text-3); }
.c-ink { color: var(--accent-ink); }
.c-success { color: var(--success); } .c-warning { color: var(--warning); }
.c-danger { color: var(--danger); } .c-info { color: var(--info); }

/* ---------- Phone frame ---------- */
.phone {
  width: 390px; height: 844px; position: relative;
  background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column;
}
.statusbar {
  height: 50px; flex: 0 0 50px; display:flex; align-items:flex-end;
  justify-content: space-between; padding: 0 26px 8px; font-weight:600; font-size:14px;
}
.statusbar .icons { display:flex; gap:6px; align-items:center; }
.screen { flex: 1 1 auto; overflow: hidden; position: relative; }
.scroll { height: 100%; padding: 4px 20px 120px; }

/* ---------- App header ---------- */
.appbar { display:flex; flex-direction:column; gap:3px; padding: 8px 0 18px; }
.appbar-top { display:flex; align-items:center; min-height:40px; gap:10px; }
.appbar-top .spacer { flex:1; }
.chip-btn {
  width:40px; height:40px; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--text-1); box-shadow: var(--shadow-card);
}
.chip-btn.ghost { box-shadow:none; background:var(--surface-2); border-color:transparent; }

/* ---------- Card ---------- */
.card {
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--r-lg); padding:18px; box-shadow: var(--shadow-card);
}
.card.sel { border-color: var(--accent); box-shadow: var(--shadow-card), 0 0 0 3px var(--accent-soft); }
.card.flat { box-shadow:none; }

/* ---------- Section header ---------- */
.sec-head { display:flex; align-items:center; justify-content:space-between; margin: 22px 2px 12px; }
.sec-head .link { color: var(--accent-ink); font-weight:600; font-size:13px; display:flex; align-items:center; gap:3px; white-space:nowrap; }

/* ---------- Buttons ---------- */
.btn {
  height:54px; border-radius:var(--r-pill); display:inline-flex; align-items:center;
  justify-content:center; gap:9px; font-weight:600; font-size:16px; border:1px solid transparent;
  padding:0 24px; cursor:pointer; width:100%;
}
.btn-primary { background:var(--accent); color:var(--accent-fg); box-shadow: 0 6px 22px var(--accent-glow); }
.btn-secondary { background:var(--surface-2); color:var(--text-1); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-outline { background:var(--surface); border-color:var(--border-strong); color:var(--text-1); box-shadow:var(--shadow-card); }
.btn.sm { height:44px; font-size:15px; }

/* ---------- Tag / pill ---------- */
.tag {
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-pill);
  font-weight:700; font-size:11px; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap;
  background:var(--accent-soft); color:var(--accent-ink);
}
.tag .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag.success { background:var(--success-soft); color:var(--success); }
.tag.warning { background:var(--warning-soft); color:var(--warning); }
.tag.danger  { background:var(--danger-soft);  color:var(--danger); }
.tag.info    { background:var(--info-soft);    color:var(--info); }
.tag.neutral { background:var(--surface-2); color:var(--text-2); }
.tag.recovery  { background:var(--cat-recovery-bg);  color:var(--cat-recovery); }
.tag.fatloss   { background:var(--cat-fatloss-bg);   color:var(--cat-fatloss); }
.tag.cognitive { background:var(--cat-cognitive-bg); color:var(--cat-cognitive); }
.tag.longevity { background:var(--cat-longevity-bg); color:var(--cat-longevity); }
.tag.muscle    { background:var(--cat-muscle-bg);    color:var(--cat-muscle); }
.tag.skincare  { background:var(--cat-skincare-bg);  color:var(--cat-skincare); }

/* ---------- List row ---------- */
.row { display:flex; align-items:center; gap:14px; padding:13px 0; min-height:44px; }
.row + .row { border-top:1px solid var(--border); }
.row-chip {
  width:42px; height:42px; border-radius:var(--r-sm); flex:0 0 42px;
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
}
.row-chip.tint-recovery  { background:var(--cat-recovery-bg);  color:var(--cat-recovery); }
.row-chip.tint-fatloss   { background:var(--cat-fatloss-bg);   color:var(--cat-fatloss); }
.row-chip.tint-cognitive { background:var(--cat-cognitive-bg); color:var(--cat-cognitive); }
.row-chip.tint-longevity { background:var(--cat-longevity-bg); color:var(--cat-longevity); }
.row-chip.tint-muscle    { background:var(--cat-muscle-bg);    color:var(--cat-muscle); }
.row-chip.tint-skincare  { background:var(--cat-skincare-bg);  color:var(--cat-skincare); }
.row-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.row-trail { display:flex; align-items:center; gap:8px; color:var(--text-2); font-weight:600; font-size:14px; white-space:nowrap; }
.row-trail .chev { color:var(--text-3); display:flex; }

/* ---------- Segmented control ---------- */
.seg {
  display:flex; background:var(--sunken); border-radius:var(--r-pill); padding:4px; gap:0; position:relative;
}
.seg button {
  flex:1; border:0; background:transparent; height:38px; border-radius:var(--r-pill);
  font-family:inherit; font-weight:600; font-size:13.5px; color:var(--text-2); cursor:pointer;
}
.seg button.on { background:var(--accent); color:var(--accent-fg); box-shadow:0 2px 8px var(--accent-glow); }
.seg.soft button.on { background:var(--surface); color:var(--text-1); box-shadow:var(--shadow-card); }

/* ---------- Unit toggle ---------- */
.units { display:flex; gap:6px; }
.units button {
  border:1px solid var(--border); background:var(--surface); border-radius:var(--r-pill);
  padding:7px 14px; font-family:inherit; font-weight:600; font-size:13px; color:var(--text-2); cursor:pointer;
}
.units button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

/* ---------- Fields ---------- */
.field { display:flex; flex-direction:column; gap:8px; }
.field .lab { color:var(--text-3); }
.input {
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  height:54px; display:flex; align-items:center; padding:0 16px; gap:10px; color:var(--text-1);
  font-size:16px; font-weight:500; overflow:hidden; white-space:nowrap;
}
.input.focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface); }
.input .unit { margin-left:auto; color:var(--text-3); font-weight:600; }
.bignum {
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; display:flex; align-items:baseline; gap:8px;
}
.bignum .v { font-family:'Bricolage Grotesque'; font-weight:800; font-size:40px; line-height:1; color:var(--text-1); font-variant-numeric:tabular-nums; }
.bignum .u { font-weight:700; font-size:18px; color:var(--text-3); }

/* ---------- Tab bar ---------- */
.tabbar {
  position:absolute; left:16px; right:16px; bottom:18px; height:66px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow: var(--shadow-pop); display:flex; align-items:center; padding:0 8px; z-index:5;
}
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:100%; color:var(--text-3); }
.tab .ic { width:40px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; }
.tab.on { color:var(--accent-ink); }
.tab.on .ic { background:var(--accent-soft); }
.tab .lbl { font-size:10.5px; font-weight:600; letter-spacing:.2px; }
.tab-add {
  width:58px; height:58px; flex:0 0 58px; border-radius:var(--r-pill); margin:0 6px;
  background:var(--accent); color:var(--accent-fg); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px var(--accent-glow); border:3px solid var(--surface);
}

/* ---------- Stat tiles ---------- */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--shadow-card); }
.tile .k { color:var(--text-3); margin-bottom:6px; }
.tile .v { font-family:'Bricolage Grotesque'; font-weight:800; font-size:26px; color:var(--text-1); font-variant-numeric:tabular-nums; }

/* ---------- misc ---------- */
.divider { height:1px; background:var(--border); margin:0; border:0; }
.icon { display:inline-flex; }
.spacer { flex:1; }
.hpad { padding:0 20px; }

/* ---------- form / tool screens ---------- */
.weekday { flex:1; height:42px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:var(--text-2); }
.weekday.on { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.fillbar { height:7px; border-radius:4px; background:var(--sunken); overflow:hidden; }
.fillbar > i { display:block; height:100%; border-radius:4px; }
.kv { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; }
.kv + .kv { border-top:1px solid var(--border); }
.kv .k { color:var(--text-2); font-weight:600; font-size:14px; }
.kv .v { color:var(--text-1); font-weight:600; font-size:15px; white-space:nowrap; }
.kv .v.hi { color:var(--accent-ink); font-family:'Bricolage Grotesque'; font-weight:800; font-size:20px; }
.rangechips { display:flex; gap:8px; }
.rangechips .rc { height:34px; padding:0 15px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; font-weight:700; font-size:12px; color:var(--text-2); letter-spacing:.4px; }
.rangechips .rc.on { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.tbl-row { display:flex; gap:10px; padding:10px 0; }
.tbl-row + .tbl-row { border-top:1px solid var(--border); }
.tbl-row .cell { flex:1; }
.delta { display:inline-flex; align-items:center; gap:3px; }
.disc { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); background:var(--warning-soft); }