/* ──────────────────────────────────────────────────────────
 * NUTBOM Mobile — Design Tokens
 *
 * This file is the single source of truth for the visual system.
 * Hebrew-first typography: NO uppercase or wide-tracking on Hebrew
 * (those rules apply to .latin-label only).
 * ────────────────────────────────────────────────────────── */

:root {
  /* ── Brand palette (matches desktop) ── */
  --teal:        #1B858B;
  --teal-light:  #2AABB3;
  --teal-deep:   #146367;
  --teal-pale:   #E8F7F8;
  --teal-tint:   rgba(27, 133, 139, 0.1);

  --gold:        #DCAE5A;
  --gold-pale:   #FDF5E6;
  --gold-tint:   rgba(220, 174, 90, 0.12);

  --sage:        #768D77;
  --sage-pale:   #EEF2EE;

  --cream:       #F9F6F1;
  --bg:          #F4F7F7;
  --surface:     #FFFFFF;

  /* Semantic */
  --primary:     var(--teal);
  --accent:      var(--gold);
  --danger:      #C0392B;
  --danger-pale: #FDECEA;
  --warning:     var(--gold);
  --success:     var(--teal);

  /* Text — keep contrast WCAG AA on white */
  --text-1:      #0F172A;            /* slate-900, primary text */
  --text-2:      #334155;            /* slate-700, secondary */
  --text-3:      #64748B;            /* slate-500, tertiary  */
  --text-muted:  #94A3B8;            /* slate-400, captions  */
  --text-inverse:#FFFFFF;

  /* Borders / dividers */
  --border:      #E2E8F0;
  --border-soft: #F1F5F9;

  /* ── Typography scale (Hebrew-safe) ──
   * Min size for Hebrew body is 14px. Labels min 11px.
   * Weights: reserve 800–900 for hero numbers / card titles only.
   */
  --font-hebrew: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-latin:  'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-hero:     32px;   /* big numbers (e.g. KPI count) */
  --fs-title:    22px;   /* screen titles */
  --fs-h2:       18px;   /* card titles */
  --fs-body:     15px;   /* default Hebrew body */
  --fs-small:    13px;   /* secondary text */
  --fs-label:    12px;   /* labels (Hebrew lowercase ok) */
  --fs-micro:    11px;   /* nav labels (Latin uppercase ok) */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;

  /* Hebrew should NEVER use widened tracking. */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;          /* Latin labels only */
  --tracking-widest: 0.18em;          /* Latin display only */

  /* ── Corner radius scale (use as hierarchy, don't pile on biggest) ── */
  --r-xs:  6px;    /* chips, pills */
  --r-sm:  10px;   /* small buttons */
  --r-md:  14px;   /* form inputs */
  --r-lg:  20px;   /* primary cards */
  --r-xl:  28px;   /* feature cards */
  --r-2xl: 36px;   /* sheets / hero blocks */
  --r-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-xl:  0 20px 50px rgba(15, 23, 42, 0.12);
  --shadow-teal:0 12px 28px rgba(27, 133, 139, 0.28);
  --shadow-gold:0 12px 28px rgba(220, 174, 90, 0.28);

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

  /* ── Layout ── */
  --max-width:    480px;
  --nav-height:   72px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --safe-top:     env(safe-area-inset-top, 0px);

  /* ── Motion ── */
  --ease:         cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     400ms;
}

/* ── Latin-only utility ──
 * Apply this to wrappers that contain ONLY Latin text (e.g. "FOOD COST",
 * "AI SCAN", brand initials). Never apply to Hebrew elements.
 */
.latin-label {
  font-family: var(--font-latin);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
}

.latin-display {
  font-family: var(--font-latin);
  letter-spacing: var(--tracking-tight);
}

/* Mono — for numbers/prices that benefit from tabular figures */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-normal);
}