@import url('vietek-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   VIETEK 2.0 — commerce prototype base
   Theme-able via CSS custom props set on .vtk-app by the
   tweaks-driven theme system (see theme.jsx).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.vtk-app {
  /* ---- theme hooks (overridden by JS theme) ---- */
  --c-accent: var(--vtk-cyan);
  --c-accent-hover: var(--vtk-cyan-700);
  --c-accent-tint: var(--vtk-cyan-050);
  --c-accent-ink: #fff;
  --c-secondary: var(--vtk-orange);

  --font-head: "Inter", var(--font-ui);
  --head-weight: 800;
  --head-tracking: -0.02em;
  --head-transform: none;

  --pad-section: 88px;
  --gap-grid: 28px;
  --card-pad: 22px;

  --card-radius: 12px;
  --card-border: 1px solid var(--vtk-border);
  --card-shadow: 0 1px 2px rgba(16,24,40,.05);
  --card-shadow-hover: 0 18px 40px rgba(16,24,40,.14);

  font-family: var(--font-ui);
  color: var(--vtk-ink);
}

/* density presets */
.vtk-app[data-density="roomy"]   { --pad-section: 104px; --gap-grid: 32px; --card-pad: 26px; }
.vtk-app[data-density="regular"] { --pad-section: 80px;  --gap-grid: 26px; --card-pad: 20px; }
.vtk-app[data-density="compact"] { --pad-section: 56px;  --gap-grid: 18px; --card-pad: 16px; }

/* card style presets */
.vtk-app[data-card="flat"]       { --card-border: 1px solid transparent; --card-shadow: 0 4px 18px rgba(16,24,40,.06); --card-radius: 16px; }
.vtk-app[data-card="industrial"] { --card-border: 1.5px solid var(--vtk-ink); --card-shadow: 6px 6px 0 var(--vtk-ink); --card-radius: 4px; }

/* type treatment */
.vtk-app[data-type="display"] { --font-head: "Barlow Semi Condensed", var(--font-ui); --head-weight: 800; --head-tracking: -0.01em; }

.vtk-container { max-width: 1240px; margin: 0 auto; padding: 0 28px; width: 100%; }
.vtk-container--wide { max-width: 1400px; }

.head { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); line-height: 1.05; color: var(--vtk-ink); margin: 0; }
.eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); }
.muted { color: var(--vtk-slate); }

/* scrollbar polish for filter rails / menus */
.vtk-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.vtk-scroll::-webkit-scrollbar-thumb { background: #d7dae0; border-radius: 999px; border: 3px solid #fff; }

/* utility animations */
@keyframes vtkRise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes vtkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtkSlideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes vtkPop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.vtk-rise { animation: vtkRise .5s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* honeycomb motif as a repeating background (data-uri) */
.vtk-honeycomb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2'%3E%3Cpath d='M28 0 L52 14 L52 42 L28 56 L4 42 L4 14 Z'/%3E%3Cpath d='M28 44 L52 58 L52 86 L28 100 L4 86 L4 58 Z'/%3E%3C/g%3E%3C/svg%3E");
}

input, select, textarea { font-family: inherit; }