@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* Card — bordered surface used for dashboard tiles, picker tiles, and the
     like. Maps onto Radix Themes' three card variants:
       • surface (our default)            — border + subtle panel fill
       • classic (.bf-card--shadow)       — border + outer shadow lift
       • ghost   (.bf-card--flat)         — no border, no fill
     The selectable variant adds a focus-visible outline + checked ring. */
  .bf-card {
    --_padding: var(--bf-space-5);
    --_radius: var(--bf-radius-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bf-color-bg-elevated);
    border: 1px solid var(--bf-color-border-base);
    border-radius: var(--_radius);
    overflow: hidden;
    min-width: 0;
    transition: box-shadow var(--bf-duration-base) var(--bf-ease-out), border-color var(--bf-duration-base) var(--bf-ease-out), background-color var(--bf-duration-base) var(--bf-ease-out);
  }
  .bf-card--hoverable:hover {
    box-shadow: var(--bf-shadow-md);
    border-color: var(--bf-color-border-strong);
  }
  /* Classic — preset shadow, hover deepens it (mirrors Radix `classic`). */
  .bf-card--shadow {
    box-shadow: var(--bf-shadow-sm);
  }
  .bf-card--shadow.bf-card--hoverable:hover {
    box-shadow: var(--bf-shadow-lg);
  }
  /* Ghost — borderless surface; uses subtle bg-tint on hover when interactive. */
  .bf-card--flat {
    border: 0;
    background-color: transparent;
  }
  .bf-card--flat.bf-card--hoverable:hover {
    background-color: var(--bf-color-surface-hover);
    box-shadow: none;
    border-color: transparent;
  }
  .bf-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-3);
    padding: var(--_padding);
    border-bottom: 1px solid var(--bf-color-border-base);
  }
  .bf-card__title {
    margin: 0;
    font-size: var(--bf-text-base);
    font-weight: var(--bf-weight-semibold);
    color: var(--bf-color-text-strong);
  }
  .bf-card__subtitle {
    margin: 0;
    font-size: var(--bf-text-sm);
    color: var(--bf-color-text-muted);
  }
  .bf-card__body {
    padding: var(--_padding);
  }
  .bf-card__body--flush {
    padding: 0;
  }
  .bf-card__footer {
    padding: var(--_padding);
    border-top: 1px solid var(--bf-color-border-base);
    background-color: var(--bf-color-bg-subtle);
  }
  /* Selectable variant — used by the theme picker. Click target = whole card.
     The aria-selected state matches Radix's focus-8 outline on selection. */
  .bf-card--selectable {
    cursor: pointer;
    transition: border-color var(--bf-duration-fast) var(--bf-ease-out), box-shadow var(--bf-duration-fast) var(--bf-ease-out);
  }
  .bf-card--selectable:focus-visible {
    outline: 2px solid var(--bf-color-primary-8);
    outline-offset: -1px;
  }
  .bf-card--selectable[aria-selected=true] {
    border-color: var(--bf-color-primary-500);
    box-shadow: 0 0 0 1px var(--bf-color-primary-500);
  }
  /* Sizes */
  .bf-card--sm {
    --_padding: var(--bf-space-3_5);
  }
  .bf-card--lg {
    --_padding: var(--bf-space-6);
  }
} /* end @layer */
/* ──────────────────────────────────────────────────────────────────────────
   Opt-in inferred children. `.bf-card--auto` styles a bare <header>/<footer>
   and body children so a server template can omit the bf-card__* classes.
   In @layer bf-auto (below bf-components) so an explicit bf-card__* class on
   any slot still wins. `>` + :where() keep it zero-specificity and confined
   to *direct* children — a nested .bf-card never inherits these.
   ────────────────────────────────────────────────────────────────────────── */
@layer bf-auto {
  :where(.bf-card--auto) > :where(header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bf-space-3);
    padding: var(--_padding);
    border-bottom: 1px solid var(--bf-color-border-base);
  }
  :where(.bf-card--auto) > :where(header) :where(h1, h2, h3, h4) {
    margin: 0;
    font-size: var(--bf-text-base);
    font-weight: var(--bf-weight-semibold);
    color: var(--bf-color-text-strong);
  }
  :where(.bf-card--auto) > :where(header) :where(p) {
    margin: 0;
    font-size: var(--bf-text-sm);
    color: var(--bf-color-text-muted);
  }
  :where(.bf-card--auto) > :where(footer) {
    padding: var(--_padding);
    border-top: 1px solid var(--bf-color-border-base);
    background-color: var(--bf-color-bg-subtle);
  }
  /* Body = any direct child that isn't the header/footer slot. */
  :where(.bf-card--auto) > :where(:not(header):not(footer)) {
    padding: var(--_padding);
  }
}
/*# sourceMappingURL=bf.card.css.map */