/**
 * CONEXITY DESIGN SYSTEM — APPROVED COMPONENT VARIANTS
 * Version: 1.0.0  |  Branch: implementation/v1
 *
 * Prerequisites: tokens.css must be loaded before this file.
 *
 * APPROVED VARIANTS (do not invent new classes outside this file):
 *   Buttons       .btn + modifier
 *   Cards         .card + modifier
 *   Forms         .form-field, .form-input, .form-label, .form-hint
 *   Important Info .info-card + modifier
 *   Pricing Cards .pricing-card + modifier
 *   Checkout Panel .checkout-panel
 *   Dashboard Card .dash-card + modifier
 *   Status Chips  .chip + modifier
 *   Section Labels .section-label, .eyebrow
 * -------------------------------------------------------------------
 */

/* ─────────────────────────────────────────────────────────
   RESET HELPERS (include in any standalone sheet)
───────────────────────────────────────────────────────── */
.ds-reset, .ds-reset *, .ds-reset *::before, .ds-reset *::after {
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────
   SECTION LABEL / EYEBROW
───────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-14);
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--border-mid);
  flex-shrink: 0;
}
/* Light-surface variant */
.section-label--light {
  color: var(--text-on-light-muted);
}
.section-label--light::before {
  background: var(--c-grey-200);
}


/* ─────────────────────────────────────────────────────────
   BUTTONS
   Base: .btn
   Modifiers: --primary, --secondary, --gold, --ghost,
              --dark, --danger
   Size: --sm, --lg
───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: var(--tracking-btn);
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.btn:hover  { opacity: 0.82; }
.btn:active { transform: scale(0.985); }
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Sizes */
.btn--sm { font-size: var(--text-xs); padding: 9px 16px; }
.btn--lg { font-size: 15px; padding: 16px 30px; }

/* Variants */
.btn--primary {
  background: var(--c-white);
  color: #0A0A0A;
  border-color: transparent;
}
.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-mid);
}
.btn--secondary:hover {
  border-color: var(--c-grey-600);
  opacity: 1;
}
.btn--gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-border);
}
.btn--gold:hover { opacity: 1; background: var(--gold-bg); }
.btn--gold-solid {
  background: var(--gold);
  color: #0A0A0A;
  border-color: transparent;
  font-weight: 600;
}
.btn--gold-solid:hover { opacity: 0.88; }
.btn--dark {
  background: #111111;
  color: var(--c-white);
  border-color: var(--border-mid);
}
.btn--dark:hover { border-color: var(--border-strong); opacity: 1; }
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn--ghost:hover { color: var(--text-primary); opacity: 1; }
.btn--danger {
  background: transparent;
  color: var(--error);
  border-color: rgba(231,76,60,0.30);
}
/* Light-surface overrides */
.btn--secondary.on-light {
  color: var(--text-on-light-primary);
  border-color: var(--c-grey-200);
}
.btn--secondary.on-light:hover { border-color: var(--c-grey-400); }


/* ─────────────────────────────────────────────────────────
   CARDS
   Base: .card
   Modifiers: --dark (default), --light, --grey, --featured
───────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  border: 1px solid var(--border-subtle);
  background: var(--surface-dark-card);
}
/* Default = dark surface */
.card--dark {
  background: var(--surface-dark-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
/* Light surface card */
.card--light {
  background: var(--surface-light-card);
  border-color: var(--surface-light-border);
  box-shadow: var(--shadow-card-light);
  color: var(--text-on-light-primary);
}
/* Grey-background page, white card */
.card--grey {
  background: var(--surface-grey-elevated);
  border-color: var(--surface-grey-border);
  box-shadow: var(--shadow-card-light);
  color: var(--text-on-light-primary);
}
/* Featured / highlighted card (gold ring) */
.card--featured {
  border-color: var(--gold-border);
  box-shadow: var(--shadow-gold);
}


/* ─────────────────────────────────────────────────────────
   IMPORTANT INFO CARD
   Used for notices, guarantees, warnings.
   Modifiers: --info (blue), --success (green), --warning (gold), --error
───────────────────────────────────────────────────────── */
.info-card {
  border-radius: var(--radius-md);
  padding: var(--card-pad-sm);
  border-left: 3px solid;
  background: var(--surface-dark-card);
}
.info-card__icon  { font-size: 18px; flex-shrink: 0; }
.info-card__body  { font-size: var(--text-small); line-height: 1.65; }
.info-card__title { font-size: var(--text-small); font-weight: 600; margin-bottom: 4px; }

.info-card--info {
  border-left-color: var(--info);
  background: var(--info-bg);
}
.info-card--success {
  border-left-color: var(--success);
  background: var(--success-bg);
}
.info-card--warning {
  border-left-color: var(--gold);
  background: var(--gold-dim);
}
.info-card--error {
  border-left-color: var(--error);
  background: var(--error-bg);
}


/* ─────────────────────────────────────────────────────────
   PRICING CARD
   .pricing-card wraps the full tier card.
   Modifiers: --standard, --featured
───────────────────────────────────────────────────────── */
.pricing-card {
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  border: 1px solid var(--border-subtle);
  background: var(--surface-dark-elevated);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pricing-card--featured {
  border-color: var(--gold-border);
  background: var(--c-grey-900);
  box-shadow: var(--shadow-gold);
  position: relative;
}
.pricing-card__chip {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-5);
}
.pricing-card__name {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.pricing-card__price-amount {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}
.pricing-card__price-period {
  font-size: var(--text-small);
  color: var(--text-muted);
}
.pricing-card__price-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.pricing-card__annual-note strong { color: var(--gold); }
.pricing-card__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-6) 0;
}
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.pricing-card__feat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-small);
  line-height: 1.55;
}
.pricing-card__feat-icon--check { color: var(--gold);    font-size: 12px; margin-top: 1px; }
.pricing-card__feat-icon--gold  { color: var(--gold);    font-size: 12px; margin-top: 1px; }
.pricing-card__feat-icon--cross { color: var(--c-grey-600); font-size: 12px; margin-top: 1px; }
.pricing-card__feat-icon--cross + span { color: var(--text-muted); }
.pricing-card__cta {
  margin-top: var(--space-8);
  width: 100%;
}


/* ─────────────────────────────────────────────────────────
   CHECKOUT PANEL
   Self-contained purchase selection widget.
───────────────────────────────────────────────────────── */
.checkout-panel {
  background: var(--surface-dark-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  max-width: 480px;
}
.checkout-panel__header {
  margin-bottom: var(--space-8);
}
.checkout-panel__title {
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-h3);
  color: var(--text-primary);
}
.checkout-panel__subtitle {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.checkout-panel__tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--card-pad-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.checkout-panel__tier-row:hover,
.checkout-panel__tier-row[aria-selected="true"] {
  border-color: var(--gold-border);
  background: var(--gold-bg);
}
.checkout-panel__tier-name  { font-weight: 600; font-size: var(--text-small); }
.checkout-panel__tier-price { font-size: var(--text-small); color: var(--text-secondary); }
.checkout-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-5);
}
.checkout-panel__total-label { font-size: var(--text-small); color: var(--text-secondary); }
.checkout-panel__total-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.checkout-panel__cta {
  width: 100%;
  margin-top: var(--space-5);
}
.checkout-panel__legal {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-4);
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────
   DASHBOARD CARD
   Stat/metric cards for internal views.
───────────────────────────────────────────────────────── */
.dash-card {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--card-pad-sm);
}
.dash-card__label {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.dash-card__value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}
.dash-card__delta {
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}
.dash-card__delta--up   { color: var(--success); }
.dash-card__delta--down { color: var(--error); }
.dash-card__delta--neutral { color: var(--text-muted); }
.dash-card--gold { border-color: var(--gold-border); }
.dash-card--gold .dash-card__value { color: var(--gold); }


/* ─────────────────────────────────────────────────────────
   FORM FIELDS
───────────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.form-label--required::after {
  content: ' *';
  color: var(--gold);
}
.form-input {
  background: var(--surface-dark-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: var(--text-small);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus   { border-color: var(--gold); }
.form-input:invalid { border-color: var(--error); }
.form-input--error  { border-color: var(--error) !important; }
.form-input--sm { padding: 8px 12px; font-size: var(--text-xs); }

/* Light-surface form inputs */
.form-input.on-light {
  background: var(--c-white);
  border-color: var(--c-grey-200);
  color: var(--text-on-light-primary);
}
.form-input.on-light::placeholder { color: var(--text-on-light-muted); }

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.form-hint--error { color: var(--error); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23777' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}


/* ─────────────────────────────────────────────────────────
   STATUS CHIPS
───────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  white-space: nowrap;
}
.chip--available {
  background: var(--chip-available-bg);
  color: var(--chip-available-text);
  border-color: var(--chip-available-border);
}
.chip--limited {
  background: var(--chip-limited-bg);
  color: var(--chip-limited-text);
  border-color: var(--chip-limited-border);
}
.chip--full {
  background: var(--chip-full-bg);
  color: var(--chip-full-text);
  border-color: var(--chip-full-border);
}
.chip--neutral {
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-text);
  border-color: var(--chip-neutral-border);
}
.chip--gold {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: var(--gold-border);
}
.chip__dot::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}