/* Lipkiss Universal Design System
   Intentionally token-based so Newspaper/tagDiv and Lipkiss modules can share one visual language. */

:root{
  --lk-primary:#111111;
  --lk-accent:#E33F6F;
  --lk-soft:#FFF4F7;
  --lk-text:#171717;
  --lk-muted:#6F6F76;
  --lk-surface:#FFFFFF;
  --lk-border:#E9E5E7;
  --lk-radius-sm:12px;
  --lk-radius-md:18px;
  --lk-radius-lg:28px;
  --lk-content:1180px;
  --lk-shadow-sm:0 8px 24px rgba(18,12,15,.055);
  --lk-shadow-md:0 18px 55px rgba(18,12,15,.085);
  --lk-space-1:6px;
  --lk-space-2:10px;
  --lk-space-3:16px;
  --lk-space-4:24px;
  --lk-space-5:32px;
  --lk-space-6:48px;
  --lk-focus:0 0 0 3px color-mix(in srgb,var(--lk-accent) 22%,transparent);
}

.lipkiss-ui{
  color:var(--lk-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.lipkiss-ui a{
  text-underline-offset:3px;
}

.lk-shell{
  width:min(100% - 32px,var(--lk-content));
  margin-inline:auto;
}

.lk-stack{display:flex;flex-direction:column;gap:var(--lk-space-4)}
.lk-row{display:flex;align-items:center;gap:var(--lk-space-3);flex-wrap:wrap}
.lk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--lk-space-3)}

.lk-card{
  box-sizing:border-box;
  width:100%;
  padding:clamp(20px,3vw,32px);
  border:1px solid var(--lk-border);
  border-radius:var(--lk-radius-lg);
  background:var(--lk-surface);
  box-shadow:var(--lk-shadow-sm);
}

.lk-card--soft{
  background:var(--lk-soft);
  border-color:color-mix(in srgb,var(--lk-accent) 14%,var(--lk-border));
}

.lk-kicker{
  color:var(--lk-accent);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lk-title{
  margin:0;
  color:var(--lk-text);
  font-size:clamp(28px,5vw,52px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:850;
}

.lk-subtitle{
  margin:0;
  max-width:740px;
  color:var(--lk-muted);
  font-size:clamp(15px,2vw,18px);
  line-height:1.65;
}

.lk-btn,
.lipkiss-ui button.lk-btn,
.lipkiss-ui a.lk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:0 20px;
  border:1px solid var(--lk-primary);
  border-radius:999px;
  background:var(--lk-primary);
  color:#fff;
  font:inherit;
  font-weight:750;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}

.lk-btn:hover{transform:translateY(-1px);box-shadow:var(--lk-shadow-sm)}
.lk-btn:focus-visible{outline:0;box-shadow:var(--lk-focus)}
.lk-btn--accent{background:var(--lk-accent);border-color:var(--lk-accent)}
.lk-btn--ghost{background:transparent;color:var(--lk-text);border-color:var(--lk-border)}
.lk-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

.lk-field,
.lipkiss-ui input.lk-field,
.lipkiss-ui select.lk-field,
.lipkiss-ui textarea.lk-field{
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--lk-border);
  border-radius:var(--lk-radius-md);
  background:var(--lk-surface);
  color:var(--lk-text);
  font:inherit;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}

textarea.lk-field{min-height:120px;padding-block:14px;resize:vertical}
.lk-field:focus{border-color:var(--lk-accent);box-shadow:var(--lk-focus)}

.lk-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  background:var(--lk-soft);
  color:var(--lk-text);
  font-size:12px;
  font-weight:750;
}

.lk-swatch{
  width:36px;
  height:36px;
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 1px var(--lk-border);
}

.lk-divider{height:1px;background:var(--lk-border);border:0;margin:var(--lk-space-4) 0}

@media(max-width:640px){
  .lk-shell{width:min(100% - 20px,var(--lk-content))}
  .lk-card{border-radius:var(--lk-radius-md)}
  .lk-btn{width:100%}
}