/* ============================================================================
   core.css — design tokens + base reset.
   Loaded BEFORE any feature CSS. Every other folder's stylesheet inherits
   the variables defined here.
   ============================================================================ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-900:#0f172a;  --brand-800:#1e293b;  --brand-700:#334155;
  --accent-700:#0f766e; --accent-600:#0d9488; --accent-500:#14b8a6;
  --accent-400:#2dd4bf; --accent-50:#f0fdfa;

  /* Neutrals */
  --bg-app:#f1f5f9;     --bg-card:#ffffff;    --bg-subtle:#f8fafc;
  --bg-elev:#fafbfc;
  --line:#e2e8f0;       --line-strong:#cbd5e1;
  --ink-900:#0f172a;    --ink-800:#1e293b;
  --ink-700:#334155;    --ink-500:#64748b;
  --ink-400:#94a3b8;    --ink-300:#cbd5e1;

  /* Status */
  --ok:#10b981;     --warn:#f59e0b;   --danger:#ef4444;   --info:#3b82f6;
  --ok-bg:#ecfdf5;  --warn-bg:#fffbeb; --danger-bg:#fef2f2; --info-bg:#eff6ff;

  /* Load-type accents */
  --type-pallets:#3b82f6;     --type-pallets-bg:#eff6ff;
  --type-containers:#f59e0b;  --type-containers-bg:#fffbeb;
  --type-bags:#10b981;        --type-bags-bg:#ecfdf5;

  /* Drag/drop feedback */
  --drop-valid:rgba(20,184,166,.18);
  --drop-valid-border:#14b8a6;
  --drop-invalid:rgba(239,68,68,.16);
  --drop-invalid-border:#ef4444;

  /* Radii */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-full:9999px;

  /* Shadow */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.05);
  --ring-focus:0 0 0 3px rgba(20,184,166,.28);

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-fast:120ms; --dur:160ms; --dur-slow:240ms;

  /* Layout (single plan header row metrics + chips) */
  --header-h:0px;
  --metrics-h:48px;
  --sidebar-trip-w:220px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Reset / Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-800);
  background: var(--bg-app);
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

/* ── Creator / host page: kill page-level vertical scroll on common wrappers ─
   Keeps scrolling inside widget panels (#load-strip__track etc.) only. */
.zc-pb-page-content-wrapper,
.zc-page-content-wrapper,
.zc-widget-embed-root {
  overflow: hidden !important;
  max-height: 100vh;
  max-height: 100dvh;
  box-sizing: border-box;
}

button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-700);
  line-height: 1.4;
}