/* ==========================================================================
   Snap Operation — minimal Apple-inspired design
   Neutral ink-first palette. Color reserved for status only.
   ========================================================================== */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

:root {
  /* Surfaces — pure neutrals */
  --bg-page:        #F5F5F7;   /* Apple system gray */
  --bg-surface:     #FFFFFF;
  --bg-sunken:      #F2F2F4;
  --bg-ink:         #181818;
  --bg-tint:        #F5F5F7;

  /* Ink */
  --fg-1:           #181818;
  --fg-2:           #6E6E73;   /* Apple secondary label */
  --fg-3:           #A1A1A6;   /* Apple tertiary */
  --fg-inv:         #FFFFFF;
  --fg-onBlue:      #FFFFFF;

  /* Accent — a single restrained blue for actions only */
  --blue-50:        #F2F4F7;
  --blue-100:       #E8EAED;
  --blue-200:       #D2D5DA;
  --blue-300:       #B0B4BA;
  --blue-400:       #6E6E73;
  --blue-500:       #181818;   /* primary action is INK, not blue */
  --blue-600:       #000000;
  --blue-700:       #000000;
  --blue-800:       #000000;
  --blue-900:       #000000;

  /* Semantic — quieter tones */
  --success:        #30734A;
  --success-bg:     #EEF3EF;
  --warning:        #8A6A1F;
  --warning-bg:     #F5F0E3;
  --danger:         #8B2A1A;
  --danger-bg:      #F3EAE8;
  --info:           #475569;
  --info-bg:        #EEF1F5;

  /* Category tints — all neutral gray; only labels differ */
  --cat-sauce:      #F2F2F4;  --cat-sauce-fg:     #6E6E73;
  --cat-vegetable:  #F2F2F4;  --cat-vegetable-fg: #6E6E73;
  --cat-meat:       #F2F2F4;  --cat-meat-fg:      #6E6E73;
  --cat-other:      #F2F2F4;  --cat-other-fg:     #6E6E73;
  --cat-dry:        #F2F2F4;  --cat-dry-fg:       #6E6E73;
  --cat-dairy:      #F2F2F4;  --cat-dairy-fg:     #6E6E73;

  /* Priority */
  --tag-primary-bg:  #181818; --tag-primary-fg:  #FFFFFF;
  --tag-secondary-bg:#F2F2F4; --tag-secondary-fg:#6E6E73;

  /* Closing icons — all ink */
  --ic-preclose:    #181818;
  --ic-restock:     #181818;
  --ic-clean:       #181818;
  --ic-closeoff:    #181818;

  /* Borders — hairlines */
  --border-1:       #E5E5EA;
  --border-2:       #EFEFF2;
  --border-focus:   #181818;

  /* Radii — Apple-ish */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Shadows — barely there */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
  --shadow-pop: 0 20px 50px rgba(0,0,0,0.18);

  /* Motion */
  --ease-snap: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur-med:   220ms;

  /* Spacing */
  --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; --sp-16: 64px;

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-num: 'SF Pro Display', -apple-system, 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-ui);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  letter-spacing: -0.01em;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; }

.scroll-soft::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-soft::-webkit-scrollbar-thumb { background: #D1D1D6; border-radius: 999px; }
.scroll-soft::-webkit-scrollbar-track { background: transparent; }

.tap { min-height: 44px; min-width: 44px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 500; letter-spacing: 0;
}

.eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3);
}

@keyframes pop-in { 0% { transform: scale(0.98); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slide-up { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }