/* LabelLens — Modern dark + lime */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Dark theme (default) */
  --ll-ink: #0B0D0C;
  --ll-surface: #14181A;
  --ll-surface-2: #1B2022;
  --ll-line: #232A2C;
  --ll-line-soft: #1E2426;
  --ll-text: #F1F2EE;
  --ll-text-2: #C7CCC4;
  --ll-mute: #8A938F;
  --ll-mute-2: #5C6562;
  --ll-lime: #C8FF3E;
  --ll-lime-soft: #1F2A0E;
  --ll-warn: #FFB547;
  --ll-warn-soft: #2A1F0A;
  --ll-alert: #FF5E5E;
  --ll-alert-soft: #2A1010;
  --ll-good: #6FE5A8;
  --ll-good-soft: #0E2A1B;

  --ll-display: 'Inter Tight', system-ui, sans-serif;
  --ll-body: 'Inter', system-ui, sans-serif;
  --ll-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="cream"] {
  --ll-ink: #F4F1E8;
  --ll-surface: #FBF8EF;
  --ll-surface-2: #FFFDF6;
  --ll-line: #E5DFCD;
  --ll-line-soft: #EFE9D6;
  --ll-text: #1A1F18;
  --ll-text-2: #3A4036;
  --ll-mute: #6E7466;
  --ll-mute-2: #9CA295;
  --ll-lime: #2F5A1A;
  --ll-lime-soft: #E1ECCB;
  --ll-warn: #B5701A;
  --ll-warn-soft: #F4E4CA;
  --ll-alert: #B43A3A;
  --ll-alert-soft: #F2D6D6;
  --ll-good: #2A7A4A;
  --ll-good-soft: #DDEFE2;
}

[data-theme="mono"] {
  --ll-ink: #FFFFFF;
  --ll-surface: #FAFAFA;
  --ll-surface-2: #FFFFFF;
  --ll-line: #E5E5E5;
  --ll-line-soft: #EFEFEF;
  --ll-text: #0A0A0A;
  --ll-text-2: #2A2A2A;
  --ll-mute: #6A6A6A;
  --ll-mute-2: #A0A0A0;
  --ll-lime: #0A0A0A;
  --ll-lime-soft: #EFEFEF;
  --ll-warn: #6A4A00;
  --ll-warn-soft: #F0E6D0;
  --ll-alert: #8B1A1A;
  --ll-alert-soft: #F2D6D6;
  --ll-good: #1A4A2A;
  --ll-good-soft: #DEEAE0;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--ll-body);
  color: var(--ll-text);
  background: #0F0F10;
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

#root { height: 100%; width: 100%; }

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

/* Scoped to the phone screen */
.ll-app {
  width: 100%; height: 100%;
  background: var(--ll-ink);
  color: var(--ll-text);
  font-family: var(--ll-body);
  position: relative;
  overflow: hidden;
}
.ll-app, .ll-app * { -webkit-font-smoothing: antialiased; }

.ll-display { font-family: var(--ll-display); letter-spacing: -0.02em; }
.ll-mono { font-family: var(--ll-mono); }

/* ── Buttons ─────────────────────────────────────────── */
.ll-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease;
  font-family: var(--ll-body);
}
.ll-btn:active { transform: scale(0.97); }
.ll-btn--primary {
  background: var(--ll-lime); color: #0B0D0C;
}
.ll-btn--secondary {
  background: var(--ll-surface-2); color: var(--ll-text); border: 1px solid var(--ll-line);
}
.ll-btn--ghost {
  background: transparent; color: var(--ll-text-2);
}
.ll-btn--block { width: 100%; }
.ll-btn--lg { padding: 16px 24px; font-size: 16px; }
.ll-btn--sm { padding: 10px 14px; font-size: 13px; }

/* ── Cards ───────────────────────────────────────────── */
.ll-card {
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  border-radius: 20px;
}

/* ── Chips ───────────────────────────────────────────── */
.ll-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--ll-line);
  background: var(--ll-surface-2);
  color: var(--ll-text-2);
  font-family: var(--ll-body);
}
.ll-chip--lime { background: var(--ll-lime-soft); color: var(--ll-lime); border-color: transparent; }
.ll-chip--warn { background: var(--ll-warn-soft); color: var(--ll-warn); border-color: transparent; }
.ll-chip--alert { background: var(--ll-alert-soft); color: var(--ll-alert); border-color: transparent; }
.ll-chip--good { background: var(--ll-good-soft); color: var(--ll-good); border-color: transparent; }

/* ── Inputs ──────────────────────────────────────────── */
.ll-input {
  width: 100%; padding: 14px 16px;
  background: var(--ll-surface);
  border: 1px solid var(--ll-line);
  color: var(--ll-text);
  border-radius: 14px;
  font-size: 15px; font-family: var(--ll-body);
  transition: border 120ms ease;
}
.ll-input:focus { outline: none; border-color: var(--ll-lime); }
.ll-input::placeholder { color: var(--ll-mute-2); }

.ll-label {
  font-size: 12px; font-weight: 600; color: var(--ll-mute);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 8px; display: block;
}

/* ── Scrollable areas ────────────────────────────────── */
.ll-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ll-scroll::-webkit-scrollbar { display: none; }

/* ── Animations ──────────────────────────────────────── */
@keyframes ll-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ll-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ll-scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(2200%); }
}
@keyframes ll-scan-sweep {
  0% { top: 0%; }
  50% { top: calc(100% - 2px); }
  100% { top: 0%; }
}
@keyframes ll-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes ll-token-fly {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  20% { opacity: 1; transform: translateY(-30px) scale(1); }
  80% { opacity: 1; transform: translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1); }
}
@keyframes ll-score-land {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ll-progress {
  from { width: 0%; }
}
@keyframes ll-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes ll-spin {
  to { transform: rotate(360deg); }
}
@keyframes ll-token-appear {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ll-fade-up { animation: ll-fade-up 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ll-fade-in { animation: ll-fade-in 300ms ease both; }

/* ── Utility ─────────────────────────────────────────── */
.ll-divider { height: 1px; background: var(--ll-line); }
.ll-row { display: flex; align-items: center; gap: 12px; }
.ll-stack { display: flex; flex-direction: column; }

/* ── Striped placeholder for product imagery ─────────── */
.ll-placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    var(--ll-line-soft) 0,
    var(--ll-line-soft) 8px,
    var(--ll-surface-2) 8px,
    var(--ll-surface-2) 16px
  );
  display: flex; align-items: center; justify-content: center;
  color: var(--ll-mute); font-family: var(--ll-mono); font-size: 11px;
  border: 1px solid var(--ll-line);
  border-radius: 12px;
}

/* ── Tab bar ─────────────────────────────────────────── */
.ll-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 84px; padding: 8px 16px 28px;
  background: rgba(11, 13, 12, 0.86);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--ll-line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  z-index: 40;
}
[data-theme="cream"] .ll-tabbar,
[data-theme="mono"] .ll-tabbar {
  background: rgba(255, 255, 255, 0.86);
}
.ll-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--ll-mute);
  font-size: 10px; font-weight: 500;
}
.ll-tab--active { color: var(--ll-text); }
.ll-tab svg { width: 22px; height: 22px; }
.ll-tab--scan {
  background: var(--ll-lime); color: #0B0D0C;
  border-radius: 18px;
  margin: 6px 4px 4px;
}
[data-theme="mono"] .ll-tab--scan { color: #FAFAFA; }

/* ── Mobile full-screen layout ───────────────────────────── */
.ll-mobile-root {
  width: 100vw;
  height: 100vh;       /* fallback */
  height: 100dvh;      /* accounts for browser chrome appearing/hiding */
  overflow: hidden;
  background: var(--ll-ink);
  position: fixed;
  top: 0; left: 0;
}

/* Screens: push content below the device notch / status bar cutout */
@media (max-width: 820px) {
  .ll-app {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Tab bar: sit above the home indicator on modern phones */
  .ll-tabbar {
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    height: auto;
    min-height: 64px;
  }
}