/* ==========================================================================
   AutoRebuildFax Shared UI Layer — v1.0
   Reusable, namespaced (.arf-*) primitives built strictly on arf-tokens.css.
   Works across marketing (custom theme) and auth/dashboard (Bootstrap) surfaces
   without colliding with the AutoDeal theme classes.
   Load order: after arf-tokens.css.
   Canonical reference: DESIGN.md §6 (components) + the arf-design-system skill.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accessibility floor (applies everywhere)
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex], .arf-btn):focus-visible {
  outline: 2px solid var(--arf-primary);
  outline-offset: 2px;
  border-radius: var(--arf-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-arf-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.arf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                 /* AA touch target */
  padding: 11px 22px;
  font-family: var(--arf-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: var(--arf-radius-md);
  cursor: pointer;
  transition: background var(--arf-transition), color var(--arf-transition),
              border-color var(--arf-transition), box-shadow var(--arf-transition),
              transform var(--arf-transition);
}
.arf-btn:active { transform: translateY(1px); }

.arf-btn--primary {
  background: var(--arf-primary);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(var(--arf-primary-rgb), 0.7);
}
.arf-btn--primary:hover {
  background: var(--arf-primary-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(var(--arf-primary-rgb), 0.8);
}

.arf-btn--outline {
  background: transparent;
  color: var(--arf-primary);
  border-color: var(--arf-primary);
}
.arf-btn--outline:hover { background: var(--arf-primary); color: #fff; }

.arf-btn--soft {
  background: var(--arf-primary-subtle);
  color: var(--arf-primary);
}
.arf-btn--soft:hover { background: var(--arf-primary); color: #fff; }

.arf-btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.arf-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

.arf-btn--lg { min-height: 52px; padding: 15px 30px; font-size: 1.02rem; }
.arf-btn--block { width: 100%; }
.arf-btn i { font-size: 1.1em; transition: transform var(--arf-transition); }
.arf-btn--primary:hover i.arf-btn__arrow,
.arf-btn--outline:hover i.arf-btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   3. Cards (flat, hairline, restrained elevation — DESIGN.md §4)
   -------------------------------------------------------------------------- */
.arf-card {
  background: var(--arf-white);
  border: 1px solid var(--arf-border);
  border-radius: var(--arf-radius-xl);
  padding: 26px;
  transition: transform var(--arf-transition), box-shadow var(--arf-transition),
              border-color var(--arf-transition);
}
.arf-card--interactive:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--arf-shadow-md);
}
.arf-card--flush { padding: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Status pills / badges (soft, legible — DESIGN.md §6)
   -------------------------------------------------------------------------- */
.arf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--arf-radius-pill);
  white-space: nowrap;
}
.arf-pill--good    { background: rgba(20, 160, 119, 0.12); color: #0e6f52; }
.arf-pill--fair    { background: var(--arf-warning-bg);     color: var(--arf-warning-text); }
.arf-pill--critical{ background: rgba(192, 57, 43, 0.12);   color: #92271c; }
.arf-pill--brand   { background: var(--arf-primary-subtle); color: var(--arf-primary); }
.arf-pill--neutral { background: var(--arf-surface-alt);    color: var(--arf-body); border: 1px solid var(--arf-border); }

/* --------------------------------------------------------------------------
   5. Reference number (mono) + verified seal — the documentary signature
   -------------------------------------------------------------------------- */
.arf-ref {
  font-family: var(--arf-font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--arf-ink);
}
.arf-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--arf-success);
  background: rgba(20, 160, 119, 0.10);
  border: 1px solid rgba(20, 160, 119, 0.28);
  border-radius: var(--arf-radius-pill);
}
.arf-seal i { font-size: 1rem; }

/* --------------------------------------------------------------------------
   6. Section rhythm + headings (DESIGN.md §3 type)
   -------------------------------------------------------------------------- */
.arf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--arf-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arf-primary);
}
.arf-display {
  font-family: var(--arf-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--arf-ink);
}
.arf-lede {
  font-family: var(--arf-font-body);
  color: var(--arf-body);
  line-height: 1.65;
}

/* Small utilities */
.arf-cursor-pointer { cursor: pointer; }

/* Topbar: sidenav toggle button */
.arf-topbar-toggle {
  background: linear-gradient(135deg, var(--arf-primary), var(--arf-focus-border)) !important;
  box-shadow: 0 2px 8px rgba(var(--arf-primary-rgb), 0.22) !important;
}

/* Topbar: user avatar circle */
.arf-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--arf-primary) 0%, var(--arf-focus-border) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* Brand-variable scope: lets markup reference var(--brand) family without
   hardcoding the hex. Replaces inline `style="--brand:#8a1a1f;…"` roots. */
.arf-brand-scope {
  --brand: var(--arf-primary);
  --brand-50: #fbeceb;
  --brand-100: #f4d4d3;
}

/* --------------------------------------------------------------------------
   7. Scroll-reveal utility (progressive enhancement; JS toggles .is-visible)
   -------------------------------------------------------------------------- */
[data-arf-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--arf-ease), transform 0.6s var(--arf-ease);
  will-change: opacity, transform;
}
[data-arf-reveal].is-visible { opacity: 1; transform: none; }
[data-arf-reveal][data-arf-delay="1"] { transition-delay: 0.08s; }
[data-arf-reveal][data-arf-delay="2"] { transition-delay: 0.16s; }
[data-arf-reveal][data-arf-delay="3"] { transition-delay: 0.24s; }
[data-arf-reveal][data-arf-delay="4"] { transition-delay: 0.32s; }