/* ════════════════════════════════════════════════
   NC Food Analyzer — v2 Theme Skin
   Loads AFTER analyzer.css and overrides its design
   tokens + a handful of selectors to match the
   nc-theme-v2 (Inter, no serif/italic, pill buttons).
   Zero JS changes required — same IDs/classes throughout.
   ════════════════════════════════════════════════ */

/* ── 1. Remap every design token to v2's palette ──
   Same variable names the rest of analyzer.css already
   reads from, so every existing rule picks this up
   automatically with zero further edits. */
#nca-app {
  --nc-green-50:  #eaf6ef;
  --nc-green-100: #d2ecdd;
  --nc-green-400: #22a35a;
  --nc-green-500: #1b8a4f;
  --nc-green-600: #16653f;
  --nc-green-900: #0f3d2e;
  --nc-ink:       #1c2521;
  --nc-ink-60:    #5b6661;
  --nc-ink-20:    #e7e6e2;
  --nc-cream:     #faf9f6;
  --nc-white:     #ffffff;

  --nc-panel:     #0f3d2e;
  --nc-card:      #123626;
  --nc-border:    rgba(34,163,90,0.18);
  --nc-text:      #eaf6ef;
  --nc-muted:     rgba(234,246,239,0.55);

  /* Drop the serif display font entirely — v2 is Inter everywhere */
  --nc-fd: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nc-fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nc-fm: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nc-r-sm: 8px;
  --nc-r-md: 14px;
  --nc-r-lg: 20px;
  --nc-r-xl: 20px;

  --nc-shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --nc-shadow-md: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --nc-shadow-lg: 0 24px 60px -24px rgba(20,60,40,0.45);
  --nc-glow:      0 0 0 rgba(0,0,0,0);
}

/* ── 2. App shell — flatten the glow, match v2 modal shadow ── */
#nca-app {
  font-family: var(--nc-fb);
  border-radius: var(--nc-r-lg);
}

/* ── 3. Headline — was italic serif, now bold Inter ── */
.nca-headline {
  font-family: var(--nc-fb) !important;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.nca-headline-em {
  font-style: normal !important;
  font-weight: 800;
  color: var(--nc-green-500);
}

/* ── 4. Eyebrow badge above the headline (new, matches v2's
   "eyebrow" pattern used on Food Database / Help Center pages) ── */
.nca-upload-hero::before {
  content: 'Vision AI ready';
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nc-green-50);
  color: var(--nc-green-600);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--nc-fb);
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 16px;
}

/* ── 5. Trust row — emoji to outline icons, pill chips ── */
.nca-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--nc-fb);
  text-transform: none;
  letter-spacing: normal;
  color: var(--nc-ink-60);
}
.nca-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Replace the emoji glyphs with outline-style icon glyphs via
   a masked background swap is risky without touching markup,
   so instead we just de-emphasize the emoji size/weight so it
   reads as a small icon rather than a cartoon glyph. */
.nca-trust-row span::first-letter {
  font-size: 0.95em;
}

/* ── 6. Buttons — square-ish to full pill, matches v2 .btn ── */
.nca-btn {
  border-radius: 50px !important;
  font-weight: 700;
  font-family: var(--nc-fb);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
}
.nca-btn:active { transform: scale(0.98); }
.nca-btn:hover { transform: none; }
.nca-btn-camera,
.nca-btn-primary,
.nca-btn-analyze {
  background: var(--nc-green-600) !important;
  box-shadow: none !important;
}
.nca-btn-camera:hover,
.nca-btn-primary:hover,
.nca-btn-analyze:hover {
  background: var(--nc-green-900) !important;
  box-shadow: none !important;
}
.nca-btn-upload {
  border: 1px solid var(--nc-ink-20) !important;
  background: var(--nc-white) !important;
}
.nca-btn-upload:hover {
  border-color: var(--nc-ink-20) !important;
  background: var(--nc-cream) !important;
}
.nca-btn-ghost {
  border: 1px solid var(--nc-ink-20) !important;
  border-radius: 50px !important;
}

/* ── 7. Drop zone ── */
.nca-drop-zone {
  border-radius: var(--nc-r-md) !important;
}

/* ── 8. Demo badge — flatten to v2's quieter style ── */
.nca-demo-badge {
  border-radius: 50px;
  font-family: var(--nc-fb);
}

/* ── 9. Preview screen — heading no longer serif ── */
.nca-preview-info h2 {
  font-family: var(--nc-fb) !important;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.nca-preview-img-wrap {
  border-radius: var(--nc-r-md) !important;
}

/* Tips list — small check-circle dots instead of emoji,
   purely visual via a colored bullet (no markup change) */
.nca-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nc-fb);
}

/* ── 10. Loading screen — calmer gradient, card-style steps ── */
#nca-screen-loading {
  background: linear-gradient(180deg, var(--nc-cream) 0%, var(--nc-green-50) 100%);
}
#nca-screen-loading::before {
  background: radial-gradient(circle, rgba(34,163,90,0.10) 0%, transparent 65%);
}
.nca-loader-img-wrap {
  border-radius: 50% !important;
  border: 4px solid var(--nc-white) !important;
  box-shadow: var(--nc-shadow-md) !important;
}
.nca-loader-step {
  border-radius: var(--nc-r-md);
  font-family: var(--nc-fb);
  font-weight: 600;
}
.nca-loader-step.active {
  border-color: var(--nc-green-500);
  font-weight: 700;
}

/* ── 11. Results screen — headings, mono numbers to Inter ── */
.nca-meal-name {
  font-family: var(--nc-fb) !important;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.nca-ring-num,
.nca-mbar-val,
.nca-food-cal,
.nca-food-p,
.nca-micro-val {
  font-family: var(--nc-fb) !important;
}
.nca-section-title {
  font-family: var(--nc-fb) !important;
  font-weight: 800;
}

/* ── 12. Action bar buttons — pill shape consistency ── */
.nca-action-btn {
  border-radius: 50px !important;
  font-family: var(--nc-fb);
  font-weight: 700;
}

/* ── 13. Modals — headings + buttons ── */
.nca-modal-title {
  font-family: var(--nc-fb) !important;
  font-weight: 800;
}
.nca-save-prompt h3 {
  font-family: var(--nc-fb) !important;
  font-weight: 800;
}
.nca-save-cta-btn {
  border-radius: 50px !important;
  font-family: var(--nc-fb);
  font-weight: 700;
}
.nca-platform-btn {
  border-radius: var(--nc-r-md) !important;
}

/* ── 14. Health/score badge — square radius down to v2 scale ── */
.nca-health-badge {
  border-radius: var(--nc-r-md) !important;
}

/* ── 15. Responsive — keep existing breakpoints, just confirm
   pill buttons collapse sanely on small screens ── */
@media (max-width: 640px) {
  .nca-btn-row { flex-direction: column; }
  .nca-action-bar { flex-wrap: wrap; }
}