/* ============================================================
   DNX Experience: component CSS.

   The design system ships these as React components that inject
   their own <style> on first render. This page is static HTML,
   so the rules are lifted out verbatim and the markup carries
   the same class names (.dnx-btn, .dnx-badge, .dnx-pill). Keep
   them byte-compatible with the bundle so a later port to the
   React components is a straight swap.

   Source: _ds_bundle.js, components/core/Button.jsx,
           components/core/Badge.jsx,
           components/patterns/StatusPill.jsx
   ============================================================ */

/* ─────────────────────────────────────────────── Button ─────
   Variants (brand rules):
     primary          Empower (#FFAD6D) fill, Secure text. The main CTA.
     secondary        Evolve 1.5px border, transparent fill (light backgrounds).
     outline-on-dark  white border/text for Secure surfaces.
   Buttons are NEVER square and NEVER uppercase. */
.dnx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease,
              border-color var(--dur-base) ease, opacity var(--dur-base) ease,
              transform var(--dur-slower) var(--ease-bounce);
  outline: none;
}
.dnx-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent); }
.dnx-btn:disabled { opacity: .5; pointer-events: none; }
.dnx-btn:active { transform: translateY(0) scale(.97); }
.dnx-btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* sizes */
.dnx-btn--sm { font-size: 13px; padding: 8px 16px; }
.dnx-btn--md { font-size: 15px; padding: 11px 24px; }
.dnx-btn--lg { font-size: 16px; padding: 14px 32px; }

/* variants */
.dnx-btn--primary { background: var(--dnx-empower); color: var(--dnx-secure); }
.dnx-btn--primary:hover { background: #F5A763; transform: translateY(-1px); }
.dnx-btn--secondary { background: transparent; color: var(--dnx-evolve); border-color: var(--dnx-evolve); }
.dnx-btn--secondary:hover { background: color-mix(in oklch, var(--dnx-evolve) 8%, transparent); }
.dnx-btn--outline-on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.dnx-btn--outline-on-dark:hover { background: rgba(255, 255, 255, .1); }
.dnx-btn--ghost-on-dark { background: transparent; color: rgba(255, 255, 255, .85); }
.dnx-btn--ghost-on-dark:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ──────────────────────────────────────────────── Badge ─────
   Compact status / category chip. Tag radius, small caps-friendly
   text. Optional leading status dot. */
.dnx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-tag);
  border: 1px solid transparent;
}
.dnx-badge--sm { font-size: 11px; padding: 3px 8px; }
.dnx-badge__dot { width: 6px; height: 6px; border-radius: 100px; flex-shrink: 0; background: currentColor; }
.dnx-badge--neutral { background: var(--surface-muted); color: var(--text-body); }
.dnx-badge--primary { background: color-mix(in oklch, var(--dnx-evolve) 12%, transparent); color: var(--dnx-evolve); }
.dnx-badge--info    { background: color-mix(in oklch, var(--dnx-future) 22%, transparent); color: #1F6FB0; }
.dnx-badge--success { background: color-mix(in oklch, var(--dnx-trust) 40%, transparent); color: #127A50; }
.dnx-badge--warning { background: color-mix(in oklch, var(--dnx-empower) 30%, transparent); color: #A85A19; }
.dnx-badge--danger  { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.dnx-badge--outline { background: transparent; color: var(--text-body); border-color: var(--border-strong); }

/* ───────────────────────────────────────────── StatusPill ───
   Small rounded pill used for freshness, filters, and inline
   status. Secondary-surface fill by default. */
.dnx-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
}
.dnx-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.dnx-pill--outline { background: transparent; border-color: var(--border-strong); }
.dnx-pill--accent  { background: color-mix(in oklch, var(--dnx-future) 22%, transparent); color: #1F6FB0; }