/* ========================================================================
   YourCompany — Component Primitives
   Button, Card, Input, Badge, Logo Tile, Avatar, Mock dashboard parts.
   ======================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   White pill = primary. Ghost = secondary. Vertical-tinted = per-vertical.
   ═══════════════════════════════════════════════════════════════════════ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-button-font-size);
  font-weight: var(--text-button-font-weight);
  line-height: var(--text-button-line-height);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
  user-select: none;
}

.button:active {
  transform: scale(0.98);
}

/* Primary — white pill on dark */
.button--primary {
  background-color: var(--color-inverse-canvas);
  color: var(--color-inverse-ink);
  border-color: var(--color-inverse-canvas);
}

.button--primary:hover {
  background-color: var(--color-surface-3);
  color: var(--color-inverse-canvas);
  border-color: var(--color-surface-3);
}

/* Secondary — ghost pill on dark */
.button--secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline);
}

.button--secondary:hover {
  background-color: var(--color-surface-1);
  border-color: var(--color-surface-3);
}

/* Vertical-tinted — colored pill in vertical sections */
.button--vertical {
  background-color: var(--vertical-color, var(--color-inverse-canvas));
  color: var(--color-inverse-ink);
  border-color: var(--vertical-color, var(--color-inverse-canvas));
}

.button--vertical:hover {
  filter: brightness(1.1);
}

/* Tertiary — bare text link styled as button */
.button--text {
  background-color: transparent;
  color: var(--color-ink);
  padding: 6px 0;
  border: none;
  border-radius: 0;
}

.button--text:hover {
  color: var(--color-interactive);
}

/* Size modifiers */
.button--sm {
  padding: 6px 14px;
  font-size: 13px;
}

.button--lg {
  padding: 14px 28px;
  font-size: 16px;
}

.button--icon {
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Vertical-context — child element reads parent's --vertical-color */
[data-vertical="restaurant"] { --vertical-color: var(--color-vertical-restaurant); --vertical-color-tint: var(--color-vertical-restaurant-tint); --vertical-color-border: var(--color-vertical-restaurant-border); }
[data-vertical="medical"]    { --vertical-color: var(--color-vertical-medical);    --vertical-color-tint: var(--color-vertical-medical-tint);    --vertical-color-border: var(--color-vertical-medical-border); }
[data-vertical="logistics"]  { --vertical-color: var(--color-vertical-logistics);  --vertical-color-tint: var(--color-vertical-logistics-tint);  --vertical-color-border: var(--color-vertical-logistics-border); }
[data-vertical="it"]         { --vertical-color: var(--color-vertical-it);         --vertical-color-tint: var(--color-vertical-it-tint);         --vertical-color-border: var(--color-vertical-it-border); }
[data-vertical="education"]  { --vertical-color: var(--color-vertical-education);  --vertical-color-tint: var(--color-vertical-education-tint);  --vertical-color-border: var(--color-vertical-education-border); }
[data-vertical="manufacturing"] { --vertical-color: var(--color-vertical-manufacturing); --vertical-color-tint: var(--color-vertical-manufacturing-tint); --vertical-color-border: var(--color-vertical-manufacturing-border); }
[data-vertical="ai"] { --vertical-color: var(--color-vertical-ai); --vertical-color-tint: var(--color-vertical-ai-tint); --vertical-color-border: var(--color-vertical-ai-border); }


/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.card {
  background-color: var(--color-surface-1);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.card--feature:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-surface-3);
}

/* Vertical-tinted card — 4px top accent + optional tint */
.card--vertical {
  position: relative;
  overflow: hidden;
}

.card--vertical::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--vertical-color, var(--color-interactive));
}

.card--vertical > * {
  position: relative;
}

.card--vertical:hover {
  background-color: var(--color-surface-2);
  border-color: var(--vertical-color-border, var(--color-surface-3));
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--vertical-color-tint, var(--color-surface-2));
  color: var(--vertical-color, var(--color-ink));
  margin-bottom: var(--space-4);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card__title {
  font-size: var(--text-card-title-font-size);
  font-weight: var(--text-card-title-font-weight);
  line-height: var(--text-card-title-line-height);
  letter-spacing: var(--text-card-title-letter-spacing);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.card__body {
  font-size: var(--text-body-sm-font-size);
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-body-sm-font-size);
  font-weight: 500;
  color: var(--vertical-color, var(--color-ink));
  transition: color var(--transition-base), gap var(--transition-base);
}

.card__link:hover {
  color: var(--color-interactive);
  gap: 8px;
}

/* Testimonial card */
.card--testimonial {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card--testimonial .card__quote {
  font-size: var(--text-body-lg-font-size);
  line-height: 1.55;
  color: var(--color-ink);
}

.card--testimonial .card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline-soft);
}

.card--testimonial .card__author-name {
  font-size: var(--text-body-sm-font-size);
  font-weight: 600;
  color: var(--color-ink);
}

.card--testimonial .card__author-role {
  font-size: 12px;
  color: var(--color-ink-subtle);
}

/* Pricing card */
.card--pricing {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card--pricing-featured {
  background-color: var(--color-surface-2);
  border-color: var(--color-surface-3);
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.card__price-amount {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--color-ink);
}

.card__price-period {
  font-size: var(--text-body-sm-font-size);
  color: var(--color-ink-muted);
}

.card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm-font-size);
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.card__feature svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-interactive);
}

.card__cta {
  margin-top: auto;
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   BADGES & PILLS
   ═══════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow-font-size);
  font-weight: var(--text-eyebrow-font-weight);
  line-height: 1;
  letter-spacing: var(--text-eyebrow-letter-spacing);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--eyebrow {
  background-color: transparent;
  color: var(--color-ink-muted);
  border-color: var(--color-hairline);
}

.badge--vertical {
  background-color: var(--vertical-color-tint, var(--color-surface-2));
  color: var(--vertical-color, var(--color-ink));
  border-color: var(--vertical-color-border, var(--color-hairline));
}

.badge--neutral {
  background-color: var(--color-surface-2);
  color: var(--color-ink-muted);
  border-color: transparent;
  text-transform: none;
  letter-spacing: 0;
}

.badge--mono {
  font-family: var(--font-mono);
  font-size: 11px;
  background-color: var(--color-surface-2);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-hairline-soft);
  text-transform: none;
  letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════════════ */

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  background-color: var(--color-surface-1);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-font-size);
  line-height: var(--text-body-line-height);
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-ink-subtle);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--color-interactive);
  box-shadow: 0 0 0 2px rgba(0, 82, 239, 0.3);
  outline: none;
}

.textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-sans);
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23b2b6bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.label {
  display: block;
  font-size: var(--text-body-sm-font-size);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-helper {
  font-size: 12px;
  color: var(--color-ink-subtle);
  margin-top: var(--space-1);
}


/* ═══════════════════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════════════════ */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-2);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  flex-shrink: 0;
  border: 1px solid var(--color-hairline);
}

.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 15px;
}


/* ═══════════════════════════════════════════════════════════════════════
   LOGO TILE (Customer Marquee)
   ═══════════════════════════════════════════════════════════════════════ */

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-hairline-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-height: 64px;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.logo-tile:hover {
  color: var(--color-ink);
  border-color: var(--color-hairline);
}


/* ═══════════════════════════════════════════════════════════════════════
   MOCK DASHBOARD (HTML/CSS product mockups)
   ═══════════════════════════════════════════════════════════════════════ */

.mock {
  background-color: var(--color-surface-1);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  font-family: var(--font-sans);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
}

.mock__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-surface-3);
}

.mock__dot--red    { background-color: #ef4444; opacity: 0.6; }
.mock__dot--yellow { background-color: #f59e0b; opacity: 0.6; }
.mock__dot--green  { background-color: #10b981; opacity: 0.6; }

.mock__url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-subtle);
  margin-left: var(--space-3);
}

.mock__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mock__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mock__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}

.mock__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mock__metric-label {
  font-size: 11px;
  color: var(--color-ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mock__metric-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-ink);
  font-feature-settings: "tnum";
}

.mock__metric-delta {
  font-size: 12px;
  color: var(--color-semantic-success);
  font-family: var(--font-mono);
}

.mock__divider {
  height: 1px;
  background-color: var(--color-hairline-soft);
  border: none;
  margin: 0;
}

.mock__table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--color-hairline-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mock__row-cell {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-1);
  font-size: 13px;
  color: var(--color-ink-muted);
}

.mock__row-cell--header {
  background-color: var(--color-canvas);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-ink-subtle);
}

.mock__row-cell--name {
  color: var(--color-ink);
  font-weight: 500;
}

.mock__row-cell--num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  text-align: right;
  color: var(--color-ink);
}

/* Bar chart inside mock */
.mock__chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding-top: var(--space-3);
}

.mock__bar {
  flex: 1;
  background-color: var(--color-surface-3);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  transition: background-color var(--transition-base);
}

.mock__bar--active {
  background-color: var(--vertical-color, var(--color-interactive));
}

.mock__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 500;
  background-color: var(--color-surface-2);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-hairline-soft);
}

.mock__tag--success { color: var(--color-semantic-success); }
.mock__tag--warning { color: var(--color-semantic-warning); }
.mock__tag--vertical {
  color: var(--vertical-color, var(--color-ink));
  border-color: var(--vertical-color-border, var(--color-hairline));
  background-color: var(--vertical-color-tint, var(--color-surface-2));
}