/* ============================================================
   BESOK DIET — Design System tokens & primitives
   Fresh & energetic · health-forward · light mode
   Typeface: Plus Jakarta Sans (made in Indonesia)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  /* ---- Brand greens (leaf scale) ---- */
  --green-50:  #EAFBF1;
  --green-100: #CFF5DE;
  --green-200: #A1E9BF;
  --green-300: #67D89A;
  --green-400: #38C57C;
  --green-500: #1FA862;   /* vivid */
  --green-600: #1F8A5B;   /* PRIMARY brand */
  --green-700: #186F49;
  --green-800: #155A3D;
  --green-900: #0F3E2B;

  /* ---- Secondary lime ---- */
  --lime-300: #B8E5A0;
  --lime-400: #93D77E;
  --lime-500: #7BC47F;    /* secondary */

  /* ---- Energy accent (turmeric) ---- */
  --amber-300: #FBE08A;
  --amber-400: #F7CF54;
  --amber-500: #F4C430;   /* accent */
  --amber-600: #E0A815;

  /* ---- Macro colors ---- */
  --macro-protein: #FF6B5E;  /* coral  */
  --macro-carbs:   #F4C430;  /* amber  */
  --macro-fat:     #5B8DEF;  /* blue   */

  /* ---- Semantic ---- */
  --success: #1FA862;
  --warning: #F59E0B;
  --danger:  #EF5B5B;        /* soft, never alarming */
  --info:    #5B8DEF;

  /* ---- Warm green-tinted neutrals ---- */
  --ink-900: #15211B;
  --ink-800: #1E2D26;
  --ink-700: #36443D;
  --ink-600: #51605A;
  --ink-500: #6E7C76;
  --ink-400: #94A19B;
  --ink-300: #BFC9C4;
  --ink-200: #DEE5E1;
  --ink-150: #E8EDEA;
  --ink-100: #F0F4F2;
  --ink-50:  #F6F9F7;
  --white:   #FFFFFF;

  /* ---- Surfaces ---- */
  --bg:        #F4F7F5;
  --surface:   #FFFFFF;
  --surface-2: #F6F9F7;

  /* ---- Typography ---- */
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;

  --text-display: 800 56px/1.0 var(--font);
  --text-h1:      700 28px/1.15 var(--font);
  --text-h2:      700 22px/1.2 var(--font);
  --text-h3:      600 18px/1.3 var(--font);
  --text-body-l:  500 16px/1.5 var(--font);
  --text-body:    400 15px/1.55 var(--font);
  --text-caption: 500 13px/1.45 var(--font);
  --text-micro:   600 11px/1.3 var(--font);

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* ---- Radius (friendly, rounded) ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  /* ---- Shadows (soft, green-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(21,33,27,.06);
  --shadow-sm: 0 2px 8px rgba(21,33,27,.06), 0 1px 2px rgba(21,33,27,.04);
  --shadow-md: 0 8px 24px rgba(21,33,27,.08), 0 2px 6px rgba(21,33,27,.05);
  --shadow-lg: 0 18px 48px rgba(21,33,27,.12), 0 6px 16px rgba(21,33,27,.06);
  --shadow-brand: 0 12px 28px rgba(31,138,91,.28);
}

* { box-sizing: border-box; }

body {
  font: var(--text-body);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   PRIMITIVES — reusable component classes
   ============================================================ */

/* Buttons */
.btn {
  font: 600 15px/1 var(--font);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--r-pill);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--green-600); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--green-700); }
.btn-secondary { background: var(--green-50); color: var(--green-700); }
.btn-secondary:hover { background: var(--green-100); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 26px; font-size: 16px; }
.btn-sm { padding: 9px 14px; font-size: 13px; }

/* Chips */
.chip {
  font: 600 13px/1 var(--font);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--ink-100); color: var(--ink-700);
  border: 1px solid transparent; cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { background: var(--ink-150); }
.chip.is-active { background: var(--green-600); color: #fff; }
.chip-outline { background: transparent; border-color: var(--ink-200); }

/* Cards */
.card {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); padding: var(--s-5);
}
.card-flat { box-shadow: none; border: 1px solid var(--ink-150); }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font: var(--text-caption); color: var(--ink-600); }
.input {
  font: 500 16px/1.2 var(--font); color: var(--ink-900);
  background: var(--surface); border: 1.5px solid var(--ink-200);
  border-radius: var(--r-md); padding: 14px 16px; width: 100%;
  transition: border .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--ink-400); }
.input:focus { outline: 0; border-color: var(--green-500); box-shadow: 0 0 0 4px var(--green-50); }

/* Badges */
.badge {
  font: var(--text-micro); letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px;
}
.badge-green { background: var(--green-50); color: var(--green-700); }
.badge-amber { background: #FEF6DE; color: var(--amber-600); }
.badge-coral { background: #FFEDEB; color: #D8483C; }

/* Toggle */
.toggle { width: 48px; height: 28px; border-radius: var(--r-pill); background: var(--ink-200);
  position: relative; cursor: pointer; transition: background .2s ease; border: 0; padding: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: left .2s ease; }
.toggle.is-on { background: var(--green-500); }
.toggle.is-on::after { left: 23px; }

/* Section label */
.eyebrow { font: var(--text-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--green-600); }