/* ========================================
   DESIGN TOKENS & COMPONENT BASE STYLES
   ======================================== */

/* ===== CARD TOKENS ===== */
.card-token {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card-token:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ===== BUTTON TOKENS ===== */
.btn-token-primary {
  background: var(--color-primary);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  user-select: none;
}

.btn-token-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-token-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-token-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-token-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  user-select: none;
}

.btn-token-secondary:hover {
  background: var(--color-primary-lighter);
  transform: translateY(-2px);
}

.btn-token-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-token-success {
  background: var(--color-success);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.btn-token-success:hover {
  background: var(--color-success-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-token-danger {
  background: var(--color-error);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.btn-token-danger:hover {
  background: var(--color-error-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ===== FORM INPUT TOKENS ===== */
.input-token {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  line-height: var(--line-height-normal);
}

.input-token::placeholder {
  color: var(--color-on-surface-variant);
}

.input-token:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lighter);
}

.input-token:disabled {
  background: var(--color-surface-dim);
  color: var(--color-on-surface-variant);
  cursor: not-allowed;
}

.input-token:invalid {
  border-color: var(--color-error);
}

.input-token:invalid:focus {
  box-shadow: 0 0 0 3px var(--color-error-lighter);
}

/* ===== TEXTAREA TOKENS ===== */
.textarea-token {
  width: 100%;
  padding: var(--space-lg);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  resize: vertical;
  min-height: 120px;
  transition: all var(--transition-fast);
  line-height: var(--line-height-relaxed);
}

.textarea-token::placeholder {
  color: var(--color-on-surface-variant);
}

.textarea-token:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lighter);
}

/* ===== SELECT TOKENS ===== */
.select-token {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565C0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 1.5rem;
  padding-right: 2.5rem;
}

[data-theme="dark"] .select-token {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.select-token:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lighter);
}

/* ===== BADGE TOKENS ===== */
.badge-token {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-primary-lighter);
  color: var(--color-primary);
  line-height: 1;
}

.badge-token.primary {
  background: var(--color-primary-lighter);
  color: var(--color-primary);
}

.badge-token.success {
  background: var(--color-success-lighter);
  color: var(--color-success);
}

.badge-token.warning {
  background: var(--color-warning-lighter);
  color: var(--color-warning);
}

.badge-token.error {
  background: var(--color-error-lighter);
  color: var(--color-error);
}

/* ===== LABEL TOKENS ===== */
.label-token {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
  margin-bottom: var(--space-sm);
}

.label-token.required::after {
  content: ' *';
  color: var(--color-error);
}

/* ===== GLASSMORPHISM EFFECT ===== */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
}

.glass-effect-sm {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border: var(--glass-border);
  border-radius: var(--radius-md);
}

/* ===== NEUMORPHISM EFFECT ===== */
.neumorphic {
  background: var(--color-surface);
  box-shadow: var(--neumorphic-light);
  border-radius: var(--radius-lg);
}

.neumorphic-sm {
  background: var(--color-surface);
  box-shadow: var(--neumorphic-light);
  border-radius: var(--radius-md);
}

/* ===== ICON TOKENS ===== */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  color: inherit;
  transition: color var(--transition-fast);
  flex-shrink: 0;
}

.icon-xs {
  width: 1rem;
  height: 1rem;
}

.icon-sm {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-lg {
  width: 2rem;
  height: 2rem;
}

.icon-xl {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-2xl {
  width: 3rem;
  height: 3rem;
}

.icon-primary {
  color: var(--color-primary);
}

.icon-secondary {
  color: var(--color-secondary);
}

.icon-success {
  color: var(--color-success);
}

.icon-warning {
  color: var(--color-warning);
}

.icon-error {
  color: var(--color-error);
}

.icon-info {
  color: var(--color-info);
}

/* ===== DIVIDER ===== */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-outline);
  margin: var(--space-2xl) 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--color-outline);
  margin: 0 var(--space-2xl);
}

/* ===== TEXT UTILITIES ===== */
.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.text-info {
  color: var(--color-info);
}

.text-muted {
  color: var(--color-on-surface-variant);
}

/* ===== BACKGROUND UTILITIES ===== */
.bg-primary {
  background: var(--color-primary);
}

.bg-primary-light {
  background: var(--color-primary-lighter);
}

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

.bg-success-light {
  background: var(--color-success-lighter);
}

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

.bg-warning-light {
  background: var(--color-warning-lighter);
}

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

.bg-error-light {
  background: var(--color-error-lighter);
}