/* ============================================================
   Kuch Bhi — Design Tokens
   Source: App screenshot (Des.png), April 2026
   Font substitution: Nunito (Google Fonts) — awaiting originals
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* ─── BASE COLOR PALETTE ──────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg-cream:      #F7F1E3;   /* Main app background — warm paper */
  --color-bg-card:       #FFFFFF;   /* Card / nav bar / input surfaces */
  --color-bg-overlay:    rgba(0,0,0,0.45); /* Food card dark overlay */

  /* Primary — Warm Orange */
  --color-orange-50:     #FEF3E6;
  --color-orange-100:    #FDE8CC;
  --color-orange-200:    #FAC988;
  --color-orange-400:    #F5A042;
  --color-orange-500:    #F0882C;   /* PRIMARY — mic button, active nav, CTAs */
  --color-orange-600:    #D9721A;
  --color-orange-700:    #B85E10;

  /* Accent — Fresh Green */
  --color-green-50:      #F0FAE8;
  --color-green-100:     #D8F3C4;
  --color-green-200:     #AADEA0;
  --color-green-400:     #88CC6A;
  --color-green-500:     #6DC04B;   /* ACCENT — Hoppy mascot, High Protein tag */
  --color-green-600:     #54A534;
  --color-green-700:     #3D8822;

  /* Neutrals */
  --color-neutral-0:     #FFFFFF;
  --color-neutral-50:    #FAFAFA;
  --color-neutral-100:   #F2F2F2;
  --color-neutral-200:   #E5E5E5;
  --color-neutral-300:   #CCCCCC;
  --color-neutral-400:   #A3A3A3;
  --color-neutral-500:   #7A7A7A;   /* Secondary text, metadata */
  --color-neutral-700:   #3D3D3D;
  --color-neutral-900:   #1C1C1C;   /* Primary text / headlines */

  /* ─── SEMANTIC COLORS ─────────────────────────────────── */
  --color-primary:         var(--color-orange-500);
  --color-primary-hover:   var(--color-orange-600);
  --color-primary-light:   var(--color-orange-100);

  --color-accent:          var(--color-green-500);
  --color-accent-light:    var(--color-green-100);

  --color-bg:              var(--color-bg-cream);
  --color-surface:         var(--color-bg-card);
  --color-border:          var(--color-neutral-200);

  --color-text-primary:    var(--color-neutral-900);
  --color-text-secondary:  var(--color-neutral-500);
  --color-text-inverse:    #FFFFFF;
  --color-text-accent:     var(--color-orange-500);

  /* Tags / Chips */
  --color-tag-protein-bg:  var(--color-green-100);
  --color-tag-protein-fg:  var(--color-green-700);
  --color-tag-comfort-bg:  var(--color-orange-100);
  --color-tag-comfort-fg:  var(--color-orange-600);

  /* ─── TYPOGRAPHY ──────────────────────────────────────── */
  --font-sans:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* Scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  34px;

  /* Weight */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* Line height */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.08em;

  /* ─── SEMANTIC TYPE ROLES ──────────────────────────────── */
  /* Use these on elements directly */

  /* ─── SPACING ─────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;

  /* ─── RADII ───────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ─── SHADOWS ─────────────────────────────────────────── */
  --shadow-card:   0 2px 12px rgba(0,0,0,0.08);
  --shadow-nav:    0 -1px 8px rgba(0,0,0,0.06);
  --shadow-button: 0 4px 16px rgba(240,136,44,0.35);

  /* ─── TRANSITIONS ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-spring: 350ms cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── SEMANTIC ELEMENT STYLES ─────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

p {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.text-accent {
  color: var(--color-text-accent);
  font-weight: var(--fw-bold);
}

caption, .caption {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
}