/* LiVAR 5.2.01: opt-in primitives for incremental UI redesign.
   Existing templates retain their selectors and cascade. Theme tokens stay
   administrator-owned. No reset, remote dependencies or !important rules. */
@layer livar-ui {
  .livar-ui {
    --ui-gap: 1rem;
    --ui-radius: 1rem;
    --ui-padding: clamp(1rem, 3vw, 2rem);
    color: var(--livar-color-text, #f6f6f4);
    font-family: var(--livar-font-family, system-ui, sans-serif);
    line-height: 1.5;
  }
  .livar-ui :where(*, *::before, *::after) { box-sizing: border-box; }
  .livar-ui :where([hidden]) { display: none; }
  .livar-ui :where(.livar-ui-stack) { display: grid; gap: var(--ui-gap); }
  .livar-ui :where(.livar-ui-cluster) {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-gap);
  }
  .livar-ui :where(.livar-ui-grid) {
    display: grid; gap: var(--ui-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .livar-ui :where(.livar-ui-grid > *, .livar-ui-split > *) { min-inline-size: 0; }
  .livar-ui :where(.livar-ui-container) { container: livar-component / inline-size; }
  .livar-ui :where(.livar-ui-split) { display: grid; gap: var(--ui-gap); }
  @supports (container-type: inline-size) {
    @container livar-component (min-width: 42rem) {
      .livar-ui :where(.livar-ui-split) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    }
  }
  .livar-ui :where(.livar-ui-surface) {
    background: var(--livar-color-surface, #101415);
    border: 1px solid var(--livar-color-border, #343839);
    border-radius: var(--ui-radius); padding: var(--ui-padding);
    overflow-wrap: anywhere;
  }
  .livar-ui :where(.livar-ui-title) {
    margin-block: 0; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
    line-height: 1.15; text-wrap: balance;
  }
  .livar-ui :where(.livar-ui-copy) { margin-block: 0; max-inline-size: 65ch; text-wrap: pretty; }
  .livar-ui :where(.livar-ui-media) {
    display: block; inline-size: 100%; aspect-ratio: 1; object-fit: contain;
    border-radius: var(--ui-radius);
  }
  .livar-ui :where(.livar-ui-button) {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; min-block-size: 3rem; padding-block: .75rem; padding-inline: 1.25rem;
    border: 1px solid transparent; border-radius: .75rem;
    background: var(--livar-color-brand, #ff5a0a); color: #070808;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  }
  .livar-ui :where(.livar-ui-field) {
    inline-size: 100%; min-inline-size: 0; min-block-size: 3rem;
    padding-block: .75rem; padding-inline: 1rem;
    border: 1px solid var(--livar-color-border-strong, #555);
    border-radius: .75rem; background: var(--livar-color-surface, #101415);
    color: inherit; font: inherit; font-size: max(1rem, 16px);
  }
  .livar-ui :where(.livar-ui-field[aria-invalid="true"]) { border-color: var(--livar-color-danger, #ff777b); }
  .livar-ui :where(.livar-ui-button:disabled) { opacity: .55; cursor: not-allowed; }
  .livar-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--livar-color-focus, #ff7a39); outline-offset: 3px;
  }
  @media (hover: hover) {
    .livar-ui :where(.livar-ui-button:hover:not(:disabled)) { background: var(--livar-color-brand-hover, #ff6a17); }
  }
  @media (forced-colors: active) {
    .livar-ui :where(.livar-ui-button, .livar-ui-field, .livar-ui-surface) { border-color: CanvasText; }
  }
}