/**
 * Asterion Bricks — Components
 *
 * Component-level styles, layered on top of tokens + utilities.
 * Loaded last in the cascade.
 *
 * Naming : `.av-<component>` base, `.av-<component>--<modifier>`,
 *          `.av-<component>__<element>`, `.av-<component>.is-<state>`.
 */

/* ============================================================================
   Section index (filled progressively as components ship)

   1. Buttons               .av-btn
   2. Links                 .av-link
   3. Forms                 .av-input, .av-label, .av-select, .av-textarea
   4. Cards                 .av-card and variants
   5. Stat callout          .av-stat
   6. Navigation header     .av-header, .av-nav, .av-megamenu, .av-drawer
   7. Footer                .av-footer
   8. Alerts & toasts       .av-alert, .av-toast
   9. Modals                .av-modal
  10. Tooltips & popovers   .av-tooltip
  11. Tabs & accordions     .av-tabs, .av-accordion
  12. Tables                .av-table
  13. Badges & tags         .av-badge

   Reference : Design Handoff Specification, section 3.
   ============================================================================ */


/* ============================================================================
   1. Buttons (Design Handoff section 3.1)

   Variants : primary, secondary, ghost, on-dark, destructive
   Sizes    : sm (32px), md (44px default), lg (52px), xl (60px hero only)
   States   : default, hover, focus, active, disabled, loading
   Border radius : radius-sm by default (tactical aesthetic — crisp corners).
   ============================================================================ */

.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-default) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.av-btn:disabled,
.av-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.av-btn.is-loading {
  cursor: wait;
}

/* --- Sizes --- */

.av-btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-body-sm);
}

.av-btn--md {
  height: 44px;
  padding: 0 var(--space-5);
}

.av-btn--lg {
  height: 52px;
  padding: 0 var(--space-7, 1.75rem);
  font-size: var(--text-body-lg);
}

.av-btn--xl {
  height: 60px;
  padding: 0 var(--space-9, 2.25rem);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
}

/* --- Variant : primary (gold fill, navy text) --- */

.av-btn--primary {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-navy);
  border-color: var(--color-brand-gold);
}
.av-btn--primary:hover,
.av-btn--primary:focus-visible {
  background-color: var(--color-brand-gold-soft);
  border-color: var(--color-brand-gold-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-gold);
}
.av-btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.92);
  box-shadow: none;
}

/* --- Variant : secondary (outlined, navy text) --- */

.av-btn--secondary {
  background-color: transparent;
  color: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
}
.av-btn--secondary:hover,
.av-btn--secondary:focus-visible {
  background-color: var(--color-brand-navy);
  color: var(--color-text-on-dark);
}

/* --- Variant : ghost (navy text, no border) --- */

.av-btn--ghost {
  background-color: transparent;
  color: var(--color-brand-navy);
  border-color: transparent;
}
.av-btn--ghost:hover,
.av-btn--ghost:focus-visible {
  background-color: var(--color-bg-subtle);
}

/* --- Variant : on-dark (for dark backgrounds — text gold or white) --- */

.av-btn--on-dark.av-btn--primary {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-navy);
}
.av-btn--on-dark.av-btn--secondary {
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}
.av-btn--on-dark.av-btn--secondary:hover,
.av-btn--on-dark.av-btn--secondary:focus-visible {
  background-color: var(--color-text-on-dark);
  color: var(--color-brand-navy);
}
.av-btn--on-dark.av-btn--ghost {
  color: var(--color-text-on-dark);
}
.av-btn--on-dark.av-btn--ghost:hover,
.av-btn--on-dark.av-btn--ghost:focus-visible {
  background-color: var(--color-bg-dark-elevated);
}

/* --- Variant : destructive --- */

.av-btn--destructive {
  background-color: var(--color-alert-red);
  color: var(--color-text-on-dark);
  border-color: var(--color-alert-red);
}
.av-btn--destructive:hover,
.av-btn--destructive:focus-visible {
  filter: brightness(1.08);
}


/* ============================================================================
   2. Links (Design Handoff section 3.2)
   ============================================================================ */

.av-link {
  color: var(--color-brand-navy);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.av-link:hover {
  color: var(--color-brand-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.av-link--on-dark {
  color: var(--color-text-on-dark);
}
.av-link--on-dark:hover {
  color: var(--color-brand-gold);
}


/* ============================================================================
   3. Forms — placeholder
   To be filled from Design Handoff section 3.3 when conversion templates are built.
   ============================================================================ */


/* ============================================================================
   4. Cards — placeholder
   To be filled from Design Handoff section 3.4 when home solutions/industries
   sections are built.
   ============================================================================ */


/* ============================================================================
   5. Stat callout — placeholder
   ============================================================================ */


/* ============================================================================
   6. Navigation (header, mega menu, drawer) — placeholder
   ============================================================================ */


/* ============================================================================
   7. Footer — placeholder
   ============================================================================ */