/**
 * BOOWS Design System - Theme Variables
 * Three styles: Default (angular), Rounded (moderate curves), Pill (fully rounded)
 */

/* ============================================
   DEFAULT STYLE (Angular/Modern)
   ============================================ */
:root,
.boows-default-style {
  /* Component Radius - minimal */
  --boows-radius: 4px;
  --boows-radius-sm: 3px;
  --boows-radius-input: 4px;
  --boows-input-radius: 4px;
  --boows-radius-button: 4px;
  --boows-button-radius: 4px;
  --boows-radius-card: 6px;
  --boows-radius-switch: 999px;
  --boows-radius-checkbox: 3px;
  --boows-radius-tag: 4px;
  --boows-select-radius: 4px;
  --boows-radius-dropdown: 4px;

  /* Border width */
  --boows-border-width: 1px;

  /* Switch dimensions - always pill style */
  --boows-switch-width: 52px;
  --boows-switch-height: 30px;
  --boows-switch-knob: 24px;
  --boows-switch-knob-radius: 50%;

  /* Checkbox/Radio dimensions */
  --boows-check-size: 20px;
  --boows-radio-dot: 10px;
}

/* ============================================
   ROUNDED STYLE (Moderate curves)
   ============================================ */
.boows-rounded {
  /* Component Radius - moderate */
  --boows-radius: 8px;
  --boows-radius-sm: 6px;
  --boows-radius-input: 10px;
  --boows-input-radius: 10px;
  --boows-radius-button: 10px;
  --boows-button-radius: 10px;
  --boows-radius-card: 12px;
  --boows-radius-switch: 999px;
  --boows-radius-checkbox: 6px;
  --boows-radius-tag: 8px;
  --boows-select-radius: 10px;
  --boows-radius-dropdown: 10px;

  /* Border width */
  --boows-border-width: 1px;

  /* Switch dimensions */
  --boows-switch-width: 52px;
  --boows-switch-height: 30px;
  --boows-switch-knob: 24px;
  --boows-switch-knob-radius: 50%;

  /* Checkbox/Radio dimensions */
  --boows-check-size: 20px;
  --boows-radio-dot: 10px;
}

/* ============================================
   PILL STYLE (Fully rounded)
   ============================================ */
.boows-pill {
  /* Component Radius - fully rounded for single-line elements */
  --boows-radius: 16px;
  --boows-radius-sm: 12px;
  --boows-radius-input: 999px;
  --boows-input-radius: 999px;
  --boows-radius-button: 999px;
  --boows-button-radius: 999px;
  --boows-radius-card: 20px;
  --boows-radius-switch: 999px;
  --boows-radius-checkbox: 8px;
  --boows-radius-tag: 999px;
  --boows-select-radius: 999px;
  --boows-radius-dropdown: 16px;

  /* Border width */
  --boows-border-width: 1px;

  /* Switch dimensions */
  --boows-switch-width: 52px;
  --boows-switch-height: 30px;
  --boows-switch-knob: 24px;
  --boows-switch-knob-radius: 50%;

  /* Checkbox/Radio dimensions */
  --boows-check-size: 22px;
  --boows-radio-dot: 12px;
}

/* ============================================
   SHARED COMPONENT STYLES
   ============================================ */

/* === Form Field Container === */
.boows-input-field {
  margin-bottom: var(--boows-space-3, 1rem);
  font-family: var(--boows-font, 'Outfit', sans-serif);
}

.boows-input-field label {
  display: block;
  margin-bottom: var(--boows-space-0, 0.25rem);
  font-size: var(--boows-font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--boows-col-text, #222);
}

/* === Input Fields === */
.boows-input-field input[type="text"],
.boows-input-field input[type="email"],
.boows-input-field input[type="password"],
.boows-input-field input[type="number"],
.boows-input-field input[type="tel"],
.boows-input-field input[type="url"],
.boows-input-field input[type="search"],
.boows-input-field input[type="date"],
.boows-input-field select {
  width: 100%;
  max-width: var(--boows-max-input-width, 400px);
  padding: var(--boows-input-padding-y, 0.625rem) var(--boows-input-padding-x, 0.875rem);
  font-size: var(--boows-font-size-base, 1rem);
  line-height: 1.5;
  color: var(--boows-col-text, #222); 
  background-color: var(--boows-input-bg, #fff);
  border: var(--boows-border-width, 1px) solid var(--boows-col-text-20, #ccc);
  border-radius: var(--boows-radius-input, 4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Textarea always uses moderate radius (never pill) */
.boows-input-field textarea {
  width: 100%;
  max-width: var(--boows-max-input-width, 400px);
  padding: var(--boows-input-padding-y, 0.625rem) var(--boows-input-padding-x, 0.875rem);
  font-size: var(--boows-font-size-base, 1rem);
  line-height: 1.5;
  color: var(--boows-col-text, #222);
  background-color: var(--boows-input-bg, #fff);
  border: var(--boows-border-width, 1px) solid var(--boows-col-text-20, #ccc);
  border-radius: var(--boows-radius, 4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.boows-input-field input:focus,
.boows-input-field textarea:focus,
.boows-input-field select:focus {
  outline: none;
  border-color: var(--boows-col-primary, #08a29a);
  box-shadow: 0 0 0 2px rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.15);
}

.boows-input-field input:hover:not(:focus),
.boows-input-field textarea:hover:not(:focus),
.boows-input-field select:hover:not(:focus) {
  border-color: var(--boows-col-text-40, #999);
}

/* === Buttons === */
.boows-button,
button.boows-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--boows-space-1, 0.5rem);
  padding: var(--boows-space-2, 0.75rem) var(--boows-space-4, 1.25rem);
  font-size: var(--boows-font-size-base, 1rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background-color: var(--boows-col-primary, #08a29a);
  border: none;
  border-radius: var(--boows-radius-button, 6px);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.boows-button:hover {
  background-color: var(--boows-col-secondary, #278782);
  box-shadow: 0 4px 12px rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.3);
}

.boows-button:active {
  transform: translateY(1px);
}

/* === Tags/Chips === */
.boows-tag,
.boows-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--boows-space-1, 0.5rem);
  padding: var(--boows-space-1, 0.5rem) var(--boows-space-2, 0.75rem);
  font-size: var(--boows-font-size-sm, 0.875rem);
  background-color: var(--boows-col-primary-10, #e6f6f5);
  color: var(--boows-col-text, #222);
  border-radius: var(--boows-radius-tag, 4px);
  border: 1px solid var(--boows-col-primary-20, #ceeceb);
}

/* === Cards === */
.boows-card {
  background: #fff;
  border-radius: var(--boows-radius-card, 8px);
  border: 1px solid var(--boows-col-text-10, #e5e6e6);
  box-shadow: var(--boows-shadow, 0 0.25rem 0.75rem rgba(0,0,0,0.08));
}

/* === Helper Text === */
.boows-forms-helper-text {
  font-size: var(--boows-font-size-sm, 0.875rem);
  color: var(--boows-col-text-60, #666);
  margin-top: 0;
  line-height: 1.4;
}
.boows-forms-helper-text:not(:empty) {
  margin-top: var(--boows-space-1, 0.5rem);
}

/* === Error Text === */
.boows-error-text {
  font-size: var(--boows-font-size-sm, 0.875rem);
  color: var(--boows-col-error, #c83636);
  margin-top: 0;
}
.boows-error-text:not(:empty) {
  margin-top: var(--boows-space-1, 0.5rem);
}
.boows-forms-helper-text:empty,
.boows-error-text:empty {
  display: none;
}