@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * PRICING CARD
 * ======================================== */

  .cinder-pricing-card {
    container-type: inline-size;
    container-name: cinder-pricing-card;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    border-radius: var(--cinder-radius-lg);
    background: var(--cinder-surface-raised);
    border: 1px solid var(--cinder-border);
    color: var(--cinder-text-default);
    box-shadow: var(--cinder-shadow-sm);
    overflow: hidden;
    transition:
      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-pricing-card[data-cinder-selected] {
    border-color: var(--cinder-accent-solid);
    box-shadow:
      var(--cinder-shadow-sm),
      0 0 0 2px color-mix(in oklch, var(--cinder-accent-solid), transparent 70%);
  }

  /* ----------------------------------------
 * Header
 * ---------------------------------------- */

  .cinder-pricing-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
    padding: var(--cinder-space-4) var(--cinder-space-4) var(--cinder-space-3);
    border-bottom: 1px solid var(--cinder-border-muted);
  }

  .cinder-pricing-card[data-cinder-selected] .cinder-pricing-card__header {
    background: color-mix(in oklch, var(--cinder-accent-solid), transparent 92%);
  }

  .cinder-pricing-card__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cinder-space-2);
  }

  /* Non-color cue for the selected plan (WCAG 1.4.1): a text pill in the header
   * so selection is conveyed independently of the accent treatment.
   *
   * This is an affirmative status badge, so it uses the solid accent fill +
   * accent-contrast label token pair (the same contract a primary Button uses),
   * which is guaranteed to clear WCAG AA in both color-scheme arms. The earlier
   * accent-text-on-a-tinted-chip treatment fell to ~4.1:1 in dark mode because
   * the chip background was a near-transparent accent wash over the dark surface.
   * The filled badge deliberately reads stronger than the faint selected-header
   * tint above it: ambient state in the container, explicit state in the chip. */
  .cinder-pricing-card__selected-flag {
    flex-shrink: 0;
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-semibold);
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--cinder-accent-contrast);
    background: var(--cinder-accent-solid);
    border-radius: var(--cinder-radius-full);
    padding: var(--cinder-space-1) var(--cinder-space-2);
    line-height: 1;
  }

  /* ----------------------------------------
 * Name & price
 * ---------------------------------------- */

  .cinder-pricing-card__name {
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
    color: var(--cinder-text-default);
    margin: 0;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  .cinder-pricing-card[data-cinder-selected] .cinder-pricing-card__name {
    color: var(--cinder-accent-text);
  }

  .cinder-pricing-card__price {
    font-size: var(--cinder-text-3xl);
    font-weight: var(--cinder-font-bold);
    color: var(--cinder-text-default);
    margin: 0;
    line-height: 1;
  }

  /* ----------------------------------------
 * Body
 * ---------------------------------------- */

  .cinder-pricing-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-3);
    padding: var(--cinder-space-4);
  }

  /* ----------------------------------------
 * Features list
 * ---------------------------------------- */

  .cinder-pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-pricing-card__feature {
    display: flex;
    align-items: baseline;
    gap: var(--cinder-space-2);
    font-size: var(--cinder-text-sm);
    color: var(--cinder-text-default);
  }

  .cinder-pricing-card__feature::before {
    content: '';
    display: inline-block;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--cinder-radius-full);
    background: var(--cinder-accent-solid);
    flex-shrink: 0;
    translate: 0 0.1em;
  }

  /* ----------------------------------------
 * Caveat
 * ---------------------------------------- */

  .cinder-pricing-card__caveat {
    font-size: var(--cinder-text-xs);
    color: var(--cinder-text-subtle);
    margin: 0;
    font-style: italic;
  }

  /* ----------------------------------------
 * Footer (CTA)
 * ---------------------------------------- */

  .cinder-pricing-card__footer {
    padding: var(--cinder-space-3) var(--cinder-space-4) var(--cinder-space-4);
    border-top: 1px solid var(--cinder-border-muted);
  }

  /* ----------------------------------------
 * Responsive
 * ---------------------------------------- */

  /* Shrink the price only when the card itself is genuinely cramped — near the
   * tight end of an auto-fit grid (examples floor at ~14rem). A viewport @media
   * here would be wrong: a pricing card reacts to its own box width, not the
   * viewport (RESPONSIVE-POLICY.md). The previous 640px viewport breakpoint
   * fired on phones; the equivalent container threshold is far smaller because
   * pricing cards render at ~14–22rem, not full-viewport width. */
  @container cinder-pricing-card (max-width: 16rem) {
    .cinder-pricing-card__price {
      font-size: var(--cinder-text-2xl);
    }
  }
}