/*
 * B9 Website Core
 *
 * Public Pricing component styles.
 *
 * Source contract:
 * - .b9-pricing
 * - .b9-pricing__content
 * - .b9-pricing__eyebrow
 * - .b9-pricing__title
 * - .b9-pricing__text
 * - .b9-pricing__grid
 * - .b9-pricing-card
 * - .b9-pricing-card__content
 * - .b9-pricing-card__title
 * - .b9-pricing-card__description
 * - .b9-pricing-card__price
 * - .b9-pricing-card__price-value
 * - .b9-pricing-card__price-suffix
 * - .b9-pricing-card__actions
 * - .b9-pricing-card__button
 *
 * Layout primitives used by the view:
 * - .b9-section
 * - .b9-container
 * - .b9-stack
 * - .b9-grid
 *
 * Responsibilities:
 * - register Pricing component presentation hooks;
 * - map supported presentation properties to Public Theme tokens;
 * - remain compatible with Theme Runtime overrides.
 *
 * Does NOT:
 * - duplicate Public layout primitive behavior;
 * - define hardcoded dimensions;
 * - define hardcoded typography sizes;
 * - define hardcoded breakpoints;
 * - decide page composition;
 * - implement Theme Editor variants.
 */

.b9-pricing {
    background: var(--b9-color-background);
    color: var(--b9-color-on-background);
}

.b9-pricing__content {
    max-width: var(--b9-content-width);
}

.b9-pricing__eyebrow {
    color: var(--b9-color-primary);
    font-family: var(--b9-font-body);
    font-size: var(--b9-font-size-sm);
    line-height: var(--b9-line-height-normal);
    font-weight: var(--b9-font-weight-semibold);
}

.b9-pricing__title {
    color: var(--b9-color-on-background);
    font-family: var(--b9-font-heading);
    font-size: var(--b9-font-size-2xl);
    line-height: var(--b9-line-height-tight);
    font-weight: var(--b9-font-weight-bold);
}

.b9-pricing__text {
    max-width: var(--b9-content-width-narrow);
    color: var(--b9-color-text-muted);
    font-family: var(--b9-font-body);
    font-size: var(--b9-font-size-md);
    line-height: var(--b9-line-height-relaxed);
    font-weight: var(--b9-font-weight-normal);
}

.b9-pricing-card {
    background: var(--b9-color-surface);
    color: var(--b9-color-on-surface);
    border: var(--b9-border-width) solid var(--b9-color-border);
    border-radius: var(--b9-radius-lg);
    box-shadow: var(--b9-shadow-md);
}

.b9-pricing-card__content {
    padding: var(--b9-space-xl);
}

.b9-pricing-card__title {
    color: var(--b9-color-on-surface);
    font-family: var(--b9-font-heading);
    font-size: var(--b9-font-size-xl);
    line-height: var(--b9-line-height-tight);
    font-weight: var(--b9-font-weight-bold);
}

.b9-pricing-card__description {
    color: var(--b9-color-text-muted);
    font-family: var(--b9-font-body);
    font-size: var(--b9-font-size-md);
    line-height: var(--b9-line-height-relaxed);
    font-weight: var(--b9-font-weight-normal);
}

.b9-pricing-card__price {
    color: var(--b9-color-primary);
    font-family: var(--b9-font-heading);
}

.b9-pricing-card__price-value {
    font-size: var(--b9-font-size-2xl);
    line-height: var(--b9-line-height-tight);
    font-weight: var(--b9-font-weight-bold);
}

.b9-pricing-card__price-suffix {
    color: var(--b9-color-text-muted);
    font-family: var(--b9-font-body);
    font-size: var(--b9-font-size-sm);
    line-height: var(--b9-line-height-normal);
    font-weight: var(--b9-font-weight-normal);
}

.b9-pricing-card__button {
    display: inline-block;
    padding-block: var(--b9-button-padding-y);
    padding-inline: var(--b9-button-padding-x);
    border-radius: var(--b9-button-radius);
    background: var(--b9-color-primary);
    color: var(--b9-color-on-primary);
    font-family: var(--b9-font-body);
    font-size: var(--b9-font-size-md);
    line-height: var(--b9-line-height-normal);
    font-weight: var(--b9-font-weight-semibold);
    box-shadow: var(--b9-shadow-sm);
}