/**
 * DS-Tokens Replacements - Directive 2
 * 
 * Replaces hardcoded spacing, radius, shadow, and typography values
 * with Design System tokens for consistency.
 * 
 * This file overrides hardcoded values found in styles.css and other files.
 */

/* ========================================
 * Spacing Replacements
 * ======================================== */

/* Common hardcoded spacing values replaced with tokens */
.row {
  gap: var(--space-md, 16px) !important;
  margin: var(--space-md, 16px) 0 var(--space-lg, 24px) 0 !important;
}

.row label.full {
  gap: var(--space-sm, 12px) !important;
}

.radio-option {
  gap: var(--space-sm, 10px);
  padding: var(--space-xxs, 4px) var(--space-xs, 8px);
}

.checkbox-line {
  gap: var(--space-sm, 12px);
  padding: var(--space-sm, 10px) var(--space-sm, 12px);
}

/* Guest list spacing */
#guestList .rowline {
  gap: var(--space-sm, 10px);
}

#guestList .rowline .small {
  gap: var(--space-xs, 6px);
}

#guestList .rowline .link {
  padding: var(--space-xs, 6px) var(--space-sm, 12px);
}

/* Form spacing */
.row-text.wide small {
  margin-top: var(--space-xs, 6px);
}

/* ========================================
 * Border Radius Replacements
 * ======================================== */

.radio-option {
  border-radius: var(--radius-input, 10px);
}

.checkbox-line {
  border-radius: var(--radius-md, 14px);
}

/* Full radius for pills */
#guestList .rowline .link {
  border-radius: var(--radius-full, 999px);
}

/* ========================================
 * Typography Replacements
 * ======================================== */

.radio-option {
  font-size: var(--type-body-size, 1rem);
  line-height: var(--type-body-line, 1.6);
}

.checkbox-line {
  font-size: var(--type-micro-size, 0.8125rem);
}

.checkbox-line .chk-text small {
  font-size: var(--type-micro-size, 0.8125rem);
}

#guestList .rowline .link strong {
  font-size: var(--type-body-size, 1rem);
}

#guestList .rowline .small {
  font-size: var(--type-micro-size, 0.8125rem);
}

#guestList .rowline .link {
  font-size: var(--type-micro-size, 0.8125rem);
}

/* ========================================
 * Shadow Replacements
 * ======================================== */

.checkbox-line {
  box-shadow: var(--shadow-card, var(--card-shadow));
}

/* ========================================
 * Button Spacing & Typography
 * ======================================== */

.btn {
  padding: var(--space-sm, 12px) var(--space-md, 16px);
  border-radius: var(--radius-button, var(--radius-md, 12px));
  font-size: var(--type-body-size, 1rem);
  line-height: var(--type-body-line, 1.6);
}

.btn--sm {
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  font-size: var(--type-micro-size, 0.8125rem);
}

.btn--lg {
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));
}

/* ========================================
 * Card Spacing & Radius
 * ======================================== */

.card {
  padding: var(--space-lg, 24px);
  margin: var(--space-md, 16px) 0;
  border-radius: var(--radius-lg, 16px);
}

.bb-card {
  padding: var(--space-lg, 24px);
  border-radius: var(--radius-lg, 16px);
}

.ap-card {
  padding: var(--space-xl, 32px);
  border-radius: var(--radius-xl, 20px);
}

/* ========================================
 * Input & Form Elements
 * ======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  padding: var(--space-sm, 12px) var(--space-md, 16px);
  border-radius: var(--radius-input, var(--radius-md, 12px));
  font-size: var(--type-body-size, 1rem);
  line-height: var(--type-body-line, 1.6);
}

/* ========================================
 * Modal & Overlay Spacing
 * ======================================== */

.modal {
  padding: var(--space-xl, 32px);
  border-radius: var(--radius-modal, var(--radius-xl, 24px));
}

.modal-header {
  padding: var(--space-lg, 24px) var(--space-xl, 32px);
  margin-bottom: var(--space-lg, 24px);
}

.modal-body {
  padding: 0 var(--space-xl, 32px);
  margin-bottom: var(--space-lg, 24px);
}

.modal-footer {
  padding: var(--space-lg, 24px) var(--space-xl, 32px);
  gap: var(--space-sm, 12px);
}

/* ========================================
 * Toast & Notification Spacing
 * ======================================== */

.toast {
  padding: var(--space-md, 16px) var(--space-lg, 24px);
  border-radius: var(--radius-md, 12px);
  gap: var(--space-sm, 12px);
}

/* ========================================
 * List & Navigation Spacing
 * ======================================== */

.nav-item {
  padding: var(--space-xs, 8px) var(--space-md, 16px);
  gap: var(--space-sm, 12px);
}

.nav-item--active {
  border-radius: var(--radius-full, 9999px);
}

/* ========================================
 * Badge & Tag Spacing
 * ======================================== */

.badge,
.tag {
  padding: var(--space-xxs, 2px) var(--space-xs, 6px);
  border-radius: var(--radius-full, 999px);
  font-size: var(--type-micro-size, 0.8125rem);
  line-height: var(--type-micro-line, 1.45);
}

/* ========================================
 * Icon Spacing
 * ======================================== */

.icon-btn {
  padding: var(--space-xs, 8px);
  border-radius: var(--radius-sm, 8px);
  gap: var(--space-xxs, 4px);
}

/* ========================================
 * Section Spacing
 * ======================================== */

.section {
  margin-bottom: var(--space-xxl, 40px);
}

.section-header {
  margin-bottom: var(--space-lg, 24px);
}

.section-content {
  gap: var(--space-md, 16px);
}

/* ========================================
 * Grid & Layout Spacing
 * ======================================== */

.grid {
  gap: var(--space-lg, 24px);
}

.grid-item {
  padding: var(--space-md, 16px);
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .card,
  .bb-card {
    padding: var(--space-md, 16px);
  }
  
  .modal {
    padding: var(--space-lg, 24px);
  }
  
  .btn {
    padding: var(--space-sm, 12px) var(--space-md, 16px);
  }
}