/* ================================================
   LumiFood Design Tokens - shared by 3 apps
   ================================================ */

:root {
  /* Brand - Luminus */
  --lumi-50:  #F5F3FF;
  --lumi-100: #EDE9FE;
  --lumi-300: #C4B5FD;
  --lumi-500: #7C3AED;   /* primary */
  --lumi-600: #6D28D9;
  --lumi-700: #4C1D95;

  /* LumiFood social spectrum: Instagram-adjacent, deliberately more violet. */
  --ig-1: #4C1D95;
  --ig-2: #6D28D9;
  --ig-3: #7C3AED;
  --ig-4: #C026D3;
  --ig-5: #F97375;
  --brand-lime: #4C1D95; /* legacy alias */
  --brand-pink: #7C3AED; /* legacy alias */
  --brand-ink: #FFFFFF;
  --brand-lime-soft: #F1ECFF;
  --brand-pink-soft: #F8ECFF;
  --ig-gradient: linear-gradient(135deg, #4C1D95 0%, #6D28D9 28%, #7C3AED 48%, #C026D3 76%, #F97375 100%);
  --ig-gradient-soft: linear-gradient(135deg, #F1ECFF 0%, #F5EEFF 44%, #FBEAF8 72%, #FFF0EC 100%);

  /* Luxury commerce UI — brand spectrum stays reserved for the logo/artwork. */
  --luxury-ivory: #F8F6F1;
  --luxury-surface: #FCFBF8;
  --luxury-navy: #16233F;
  --luxury-champagne: #B59B6A;
  --luxury-stone: #6F6A63;
  --luxury-line: #E7E1D7;
  --luxury-soft: #F0EEE9;

  /* Neutrals */
  --ink-900: #0A0A0A;
  --ink-700: #2C2C2C;
  --ink-500: #6B6B6B;
  --ink-300: #B5B5B5;
  --ink-100: #EEEEEE;
  --ink-50:  #F7F7F7;
  --paper:   #FFFFFF;

  /* Semantic */
  --ok:   #16A34A;
  --warn: #F59E0B;
  --err:  #DC2626;
  --info: #2563EB;

  /* Type */
  --font-display: 'Playfair Display', 'DM Serif Display', serif;
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-vi:      'Be Vietnam Pro', 'Inter', sans-serif;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --sh-2: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05);
  --sh-3: 0 12px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --sh-pop: 0 24px 60px rgba(109,40,217,0.20);

  /* Spacing scale (4-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;
}

/* Dark theme (Shipper app default) */
[data-theme="dark"] {
  --paper:   #0F1115;
  --ink-50:  #16181D;
  --ink-100: #1F2228;
  --ink-300: #3A3F47;
  --ink-500: #8A8F98;
  --ink-700: #D5D9DF;
  --ink-900: #FFFFFF;
}

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.text-ig-gradient {
  background: var(--ig-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bg-ig-gradient { background: var(--ig-gradient); }
.bg-brand-gradient-soft { background: var(--ig-gradient-soft); }
.text-brand-ink { color: var(--brand-ink); }
.text-brand-pink { color: var(--brand-pink); }
.text-brand-lime { color: #6D28D9; }
.border-brand-lime { border-color: #7C3AED; }

.font-display { font-family: var(--font-display); }
.font-vi { font-family: var(--font-vi); }

/* Pin pulse */
@keyframes lumi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,0.42); }
  70%  { box-shadow: 0 0 0 18px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.lumi-pulse { animation: lumi-pulse 2s infinite; }

/* Shimmer skeleton */
@keyframes lumi-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.lumi-shimmer {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 40%, #f3f4f6 80%);
  background-size: 800px 100%;
  animation: lumi-shimmer 1.4s infinite linear;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.22); }
  65% { transform: scale(0.94); }
}

@keyframes heartPop {
  0% { opacity: 0; transform: scale(0.45) rotate(-12deg); filter: drop-shadow(0 16px 30px rgba(0,0,0,.18)); }
  18% { opacity: 1; transform: scale(1.12) rotate(0deg); }
  55% { opacity: .96; transform: scale(.94); }
  100% { opacity: 0; transform: scale(1.55); filter: drop-shadow(0 20px 42px rgba(239,68,68,.22)); }
}

/* Smooth nav */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Full-height app shell that follows mobile browser toolbars.
   The legacy 100vh declaration is only a fallback; svh/dvh must win. */
.lumi-app-shell {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
}

/* ================================================
   Universal polish layer (shared by 4 apps)
   Additive only — does not change the design language.
   ================================================ */

/* Kill the grey mobile tap-flash + 300ms double-tap zoom delay on tappable UI. */
* { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], [onclick], label, input[type="button"], input[type="submit"] {
  touch-action: manipulation;
}

/* Momentum scrolling on iOS for scroll regions. */
.no-scrollbar, main, [data-scroll] { -webkit-overflow-scrolling: touch; }

/* Images shouldn't be draggable/selectable on touch — feels native. */
img, svg { -webkit-user-drag: none; user-select: none; }

/* Brand selection colour. */
::selection { background: rgba(124, 58, 237, 0.20); }
::-moz-selection { background: rgba(124, 58, 237, 0.20); }

/* Accessible keyboard focus ring (keyboard nav only — never shows on tap/mouse). */
:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respect reduced-motion preference (accessibility). */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}