/* food2go — design tokens */



:root {
  /* base palette — stable across all clients */
  --c-dark:        #1B0E48;
  --c-offwhite:    #F0F0F3;
  --c-midtaupe:    #A9A2BD;  /* legacy name — now lavender-grey */
  --c-darktaupe:   #6F6589;  /* legacy name — now muted navy-grey */
  --c-lightgrey:   #DBD8E0;
  --c-white:       #FFFFFF;

  /* brand accent — supplied at runtime via theme_provider.
     Default: food2go coral. */
  --c-accent:      #EE4A5D;
  --c-accent-ink:  #FFFFFF;  /* text color on accent fills */

  /* type */
  --font-brand: 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui:    'Poppins',    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* radii */
  --r-card:  16px;
  --r-pill:  9999px;
  --r-tile:  20px;

  /* shadows */
  --sh-card:  0 1px 2px rgba(26,26,26,.05), 0 6px 16px rgba(26,26,26,.06);
  --sh-float: 0 4px 14px rgba(26,26,26,.10), 0 12px 28px rgba(26,26,26,.08);
}

/* Shimmer / skeletonizer keyframes */
@keyframes f2g-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Motion tokens ─── */
:root {
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */   /* rises, reveals, tab morphs */
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* brand moments, selection pops */
  --dur-fast: 160ms; /* @kind other */   /* presses, fills */
  --dur-med:  260ms; /* @kind other */   /* pill morphs, count ticks */
  --dur-slow: 420ms; /* @kind other */   /* sheets, toasts */
}

/* ─── Micro-interaction keyframes ─── */
@keyframes f2g-icon-pop { 0% { transform: scale(1) } 45% { transform: scale(1.22) } 100% { transform: scale(1) } }
@keyframes f2g-check-in { 0% { transform: scale(0); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes f2g-tick-up { 0% { transform: translateY(55%); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes f2g-tick-down { 0% { transform: translateY(-55%); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes f2g-toast-in { 0% { transform: translateY(-16px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes f2g-sheet-up { 0% { transform: translateY(28px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes f2g-fade-in { from { opacity: 0 } to { opacity: 1 } }

/* press feedback — add .f2g-press to any button/row */
.f2g-press { transition: transform var(--dur-fast) var(--ease-settle); }
.f2g-press:active { transform: scale(0.97); }
.f2g-skeleton {
  background: linear-gradient(
    100deg,
    rgba(196,168,130,.18) 0%,
    rgba(196,168,130,.32) 40%,
    rgba(196,168,130,.18) 80%
  );
  background-size: 200% 100%;
  animation: f2g-shimmer 1.6s linear infinite;
  border-radius: 12px;
}

/* Striped image placeholder (white-label safe — no real photography) */
.f2g-ph {
  position: relative;
  background-color: var(--c-midtaupe);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0 14px,
    rgba(0,0,0,.04)       14px 28px
  );
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f2g-ph[data-tone="dark"]   { background-color: #241A4F; }
.f2g-ph[data-tone="taupe"]  { background-color: var(--c-midtaupe); }
.f2g-ph[data-tone="brown"]  { background-color: var(--c-darktaupe); }
.f2g-ph[data-tone="cream"]  { background-color: #E4E4EC; }
.f2g-ph[data-tone="accent"] { background-color: var(--c-accent); }

.f2g-ph__lbl {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.85);
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.25);
  text-transform: lowercase;
}

/* Reusable text styles */
.f2g-h1   { font-family: var(--font-brand); font-weight: 800; font-size: 26px; letter-spacing: .04em; line-height: 1.1; }
.f2g-h2   { font-family: var(--font-brand); font-weight: 700; font-size: 20px; letter-spacing: .01em; line-height: 1.15; }
.f2g-h3   { font-family: var(--font-ui);    font-weight: 600; font-size: 15px; color: var(--c-dark); line-height: 1.25; }
.f2g-sub  { font-family: var(--font-ui);    font-weight: 400; font-size: 13px; color: var(--c-darktaupe); }
.f2g-btn  { font-family: var(--font-brand); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.f2g-pill { font-family: var(--font-ui);    font-weight: 500; font-size: 12px; }