/* ==========================================================================
   VMING Semiconductor — Component Specifications v2.0
   All components reference tokens.css variables exclusively.
   No hardcoded values. All states documented.
   ========================================================================== */

/* ==========================================================================
   BUTTON
   ==========================================================================
   Variants: Primary | Secondary | Ghost | Icon
   Sizes:    md (default) | sm | lg
   States:   default | :hover | :active | :focus-visible | :disabled
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--btn-transition);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  line-height: 1;
}

/* Primary */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}
.btn--primary:hover  { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn--primary:active { background: var(--interactive-accent); opacity: 0.9; }
.btn--primary:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Secondary (outline/ghost hybrid) */
.btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover  { background: rgba(255,255,255,0.06); }
.btn--secondary:active { background: rgba(255,255,255,0.1); }
.btn--secondary:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-text);
  border-color: transparent;
}
.btn--ghost:hover  { background: var(--btn-ghost-hover-bg); color: var(--text-primary); }
.btn--ghost:active { background: rgba(255,255,255,0.1); }
.btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Sizes */
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.btn--lg { padding: var(--space-3) var(--space-8); font-size: var(--font-size-md); }

/* Icon-only */
.btn--icon { padding: var(--space-2); }
.btn--icon.btn--sm { padding: var(--space-1); }
.btn--icon.btn--lg { padding: var(--space-3); }


/* ==========================================================================
   INPUT FIELD
   ==========================================================================
   Variants: default | .is-focused | .is-error | .is-disabled
   With:     Label (.input__label) | Helper (.input__helper) | Error (.input__error)
   ========================================================================== */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.input__label {
  font-family: var(--input-label-font);
  font-size: var(--input-label-size);
  font-weight: var(--font-weight-medium);
  color: var(--input-label-color);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.input__wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--transition-base);
}

.input__wrapper:focus-within {
  border-color: var(--input-border-focus);
  border-width: 2px;
  padding: calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);
}

.input__wrapper.is-error {
  border-color: var(--input-border-error);
  border-width: 2px;
}

.input__field {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--input-font);
  font-size: var(--input-font-size);
  color: var(--input-text);
  width: 100%;
}

.input__field::placeholder { color: var(--input-placeholder); }
.input__field:disabled { opacity: 0.5; cursor: not-allowed; }

.input__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

.input__wrapper:focus-within .input__icon { color: var(--interactive-accent); }
.input__wrapper.is-error .input__icon { color: var(--status-error); }

.input__helper {
  font-family: var(--font-body);
  font-size: var(--input-helper-size);
  color: var(--input-helper-color);
}

.input__error {
  font-family: var(--font-body);
  font-size: var(--input-helper-size);
  color: var(--status-error);
}


/* ==========================================================================
   CARD
   ==========================================================================
   Slots: [header] [content] [actions]
   States: default | :hover
   ========================================================================== */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform var(--card-transition),
              border-color var(--card-transition),
              box-shadow var(--card-transition);
}

.card:hover {
  transform: translateY(var(--card-hover-elevation));
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-glow);
}

.card__header   { padding: var(--card-padding) var(--card-padding) var(--space-2); }
.card__content  { padding: var(--space-2) var(--card-padding); }
.card__actions  {
  padding: var(--space-2) var(--card-padding) var(--card-padding);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.card__description {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
  margin-top: var(--space-1);
}


/* ==========================================================================
   CHIP / STATUS BADGE
   ==========================================================================
   Variants: success | warning | error | info | neutral
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  font-family: var(--chip-font);
  font-size: var(--chip-font-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--chip-radius);
  white-space: nowrap;
  line-height: 1.4;
}

.chip__dot {
  width: var(--chip-dot-size);
  height: var(--chip-dot-size);
  border-radius: 50%;
  flex-shrink: 0;
}

.chip--success { color: var(--status-success); background: var(--status-success-bg); }
.chip--success .chip__dot { background: var(--status-success); }

.chip--warning { color: var(--status-warning); background: var(--status-warning-bg); }
.chip--warning .chip__dot { background: var(--status-warning); }

.chip--error { color: var(--status-error); background: var(--status-error-bg); }
.chip--error .chip__dot { background: var(--status-error); }

.chip--info { color: var(--status-info); background: var(--status-info-bg); }
.chip--info .chip__dot { background: var(--status-info); }

.chip--neutral { color: var(--text-secondary); background: rgba(255,255,255,0.06); }


/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--nav-padding-x);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

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

.navbar__logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--interactive-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-inverse);
  line-height: 1;
}

.navbar__brand-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

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

.navbar__link {
  font-family: var(--nav-item-font);
  font-size: var(--nav-item-size);
  font-weight: var(--font-weight-medium);
  color: var(--nav-item-default);
  transition: color var(--transition-fast);
  text-decoration: none;
}
.navbar__link:hover { color: var(--text-primary); }
.navbar__link.is-active { color: var(--nav-item-active); }


/* ==========================================================================
   FILTER PANE (VMING Product Spectrum Selector)
   ==========================================================================
   Spec from PDF: 280px, #0F224A bg, 1px #1E355E border-right
   ========================================================================== */

.filter-pane {
  width: var(--filter-width);
  background: var(--filter-bg);
  border-right: 1px solid var(--filter-border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  flex-shrink: 0;
}

.filter-pane__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.filter-pane__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1) 0;
  transition: color var(--transition-fast);
}

.filter-pane__checkbox:hover { color: var(--text-primary); }
.filter-pane__checkbox input { accent-color: var(--interactive-accent); }


/* ==========================================================================
   HARDWARE PARAMETRIC CARD (VMING-specific SSD/product card)
   ==========================================================================
   Spec from PDF: #16253D bg, 1px #1E355E border, 6px radius, 16px padding
   Hover: translateY(-2px), border → cyan
   ========================================================================== */

.product-card {
  background: var(--color-navy-700);
  border: 1px solid var(--color-navy-600);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-cyan-300);
  box-shadow: var(--shadow-glow);
}

.product-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.product-card__subtitle {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.product-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.product-card__spec-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.product-card__spec-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}


/* ==========================================================================
   PROGRESS INDICATOR
   ========================================================================== */

.progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

.progress__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--interactive-accent);
}

.progress__track {
  width: 100%;
  height: 8px;
  background: var(--color-navy-800);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: var(--interactive-accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}


/* ==========================================================================
   TABLE / DATA GRID
   ========================================================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-family: var(--table-header-font);
  font-size: var(--table-header-size);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: left;
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--table-border);
}

.data-table td {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--text-primary);
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--table-border);
}

.data-table tr:hover td { background: var(--table-row-hover); }
.data-table tr:nth-child(even) td { background: var(--table-stripe); }
.data-table tr:nth-child(even):hover td { background: var(--table-row-hover); }


/* ==========================================================================
   LIST ITEM (high-density, 1px dividers, icon box)
   ========================================================================== */

.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--table-border);
  transition: background var(--transition-fast);
}

.list-item:hover { background: var(--table-row-hover); }

.list-item__icon-box {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 240, 255, 0.08);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  color: var(--interactive-accent);
}

.list-item__content { flex: 1; min-width: 0; }

.list-item__title {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.list-item__description {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.list-item__chevron { color: var(--text-tertiary); flex-shrink: 0; }


/* ==========================================================================
   DIVIDER
   ========================================================================== */

.divider {
  height: 1px;
  width: 100%;
  background: var(--border-default);
  border: none;
}

.divider--subtle { background: var(--border-subtle); }


/* ==========================================================================
   AVATAR
   ========================================================================== */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--interactive-accent);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  flex-shrink: 0;
}

.avatar--sm { width: 32px; height: 32px; font-size: var(--font-size-sm); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--font-size-md); }


/* ==========================================================================
   TOGGLE / SWITCH
   ========================================================================== */

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--color-navy-600);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  padding: 0;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform var(--transition-fast);
}

.toggle[aria-checked="true"] {
  background: var(--interactive-accent);
}

.toggle[aria-checked="true"]::after {
  transform: translateX(20px);
}


/* ==========================================================================
   GRID / LAYOUT HELPERS
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}