/* WCL design tokens. Override per-theme by setting these CSS custom
 * properties on `:root` or any ancestor of `.wcl-account`.
 *
 * Server-side, AssetLoader::tokens_for_preset() injects these inline so
 * an admin preset toggle reflects without a rebuild.
 */

:root {
    /* Colors */
    --wcl-color-bg: #ffffff;
    --wcl-color-surface: #fafafa;
    --wcl-color-border: #e5e5e5;
    --wcl-color-text: #111111;
    --wcl-color-text-muted: #6b7280;
    --wcl-color-primary: #111111;
    --wcl-color-primary-fg: #ffffff;
    --wcl-color-accent: #f59e0b;
    --wcl-color-success: #10b981;
    --wcl-color-danger: #ef4444;

    /* Typography */
    --wcl-font-family: inherit;
    --wcl-font-size-sm: 0.875rem;
    --wcl-font-size-base: 1rem;
    --wcl-font-size-lg: 1.125rem;
    --wcl-font-size-xl: 1.5rem;
    --wcl-font-size-2xl: 2.25rem;
    --wcl-font-weight-medium: 500;
    --wcl-font-weight-semibold: 600;

    /* Spacing — 4px baseline */
    --wcl-space-1: 0.25rem;
    --wcl-space-2: 0.5rem;
    --wcl-space-3: 0.75rem;
    --wcl-space-4: 1rem;
    --wcl-space-6: 1.5rem;
    --wcl-space-8: 2rem;

    /* Radius */
    --wcl-radius-sm: 4px;
    --wcl-radius-md: 8px;
    --wcl-radius-lg: 12px;
    --wcl-radius-pill: 9999px;

    /* Shadow */
    --wcl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --wcl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* Motion */
    --wcl-duration: 180ms;
    --wcl-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-wcl-theme="light"]) {
        --wcl-color-bg: #0a0a0a;
        --wcl-color-surface: #141414;
        --wcl-color-border: #262626;
        --wcl-color-text: #fafafa;
        --wcl-color-text-muted: #9ca3af;
        --wcl-color-primary: #ffffff;
        --wcl-color-primary-fg: #0a0a0a;
        --wcl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --wcl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    }
}

[data-wcl-theme="dark"] {
    --wcl-color-bg: #0a0a0a;
    --wcl-color-surface: #141414;
    --wcl-color-border: #262626;
    --wcl-color-text: #fafafa;
    --wcl-color-text-muted: #9ca3af;
    --wcl-color-primary: #ffffff;
    --wcl-color-primary-fg: #0a0a0a;
    --wcl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --wcl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --wcl-duration: 0ms;
    }
}
/* WCL frontend components. Single bundle; tokens in tokens.css. */

.wcl-account {
    font-family: var(--wcl-font-family);
    color: var(--wcl-color-text);
    display: grid;
    gap: var(--wcl-space-6);
}

/* Card --------------------------------------------------------------- */

.wcl-card {
    background: var(--wcl-color-surface);
    border: 1px solid var(--wcl-color-border);
    border-radius: var(--wcl-radius-lg);
    padding: var(--wcl-space-6);
    box-shadow: var(--wcl-shadow-sm);
}

.wcl-eyebrow {
    display: block;
    font-size: var(--wcl-font-size-sm);
    color: var(--wcl-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--wcl-font-weight-medium);
}

.wcl-muted {
    color: var(--wcl-color-text-muted);
    font-size: var(--wcl-font-size-sm);
    margin: 0 0 var(--wcl-space-4);
}

/* Balance card ------------------------------------------------------- */

.wcl-balance-card {
    display: grid;
    gap: var(--wcl-space-4);
}

.wcl-balance-amount {
    display: flex;
    align-items: baseline;
    gap: var(--wcl-space-2);
}

.wcl-balance-amount__icon {
    color: var(--wcl-color-accent);
    font-size: var(--wcl-font-size-xl);
    line-height: 1;
}

.wcl-balance-amount__value {
    font-size: var(--wcl-font-size-2xl);
    font-weight: var(--wcl-font-weight-semibold);
    line-height: 1;
}

.wcl-balance-amount__label {
    color: var(--wcl-color-text-muted);
    font-size: var(--wcl-font-size-base);
}

.wcl-balance-card__actions {
    display: flex;
    gap: var(--wcl-space-3);
    flex-wrap: wrap;
}

/* Tier --------------------------------------------------------------- */

.wcl-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wcl-space-2);
}

.wcl-tier-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--wcl-space-1) var(--wcl-space-3);
    border-radius: var(--wcl-radius-pill);
    background: var(--wcl-color-primary);
    color: var(--wcl-color-primary-fg);
    font-size: var(--wcl-font-size-sm);
    font-weight: var(--wcl-font-weight-medium);
    text-transform: capitalize;
}

.wcl-tier-progress-label {
    font-size: var(--wcl-font-size-sm);
    color: var(--wcl-color-text-muted);
}

/* Progress bar ------------------------------------------------------- */

.wcl-progress {
    background: var(--wcl-color-border);
    border-radius: var(--wcl-radius-pill);
    overflow: hidden;
    height: 8px;
}

.wcl-progress__bar {
    background: var(--wcl-color-accent);
    height: 100%;
    transition: width var(--wcl-duration) var(--wcl-easing);
}

/* Section ------------------------------------------------------------ */

.wcl-section {
    background: var(--wcl-color-surface);
    border: 1px solid var(--wcl-color-border);
    border-radius: var(--wcl-radius-lg);
    padding: var(--wcl-space-6);
}

.wcl-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wcl-space-2);
    margin-bottom: var(--wcl-space-4);
}

.wcl-section-title {
    font-size: var(--wcl-font-size-lg);
    font-weight: var(--wcl-font-weight-semibold);
    margin: 0;
}

/* Buttons ------------------------------------------------------------ */

.wcl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wcl-space-2);
    padding: var(--wcl-space-2) var(--wcl-space-4);
    border-radius: var(--wcl-radius-md);
    font-size: var(--wcl-font-size-sm);
    font-weight: var(--wcl-font-weight-medium);
    line-height: 1.2;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wcl-color-text);
    cursor: pointer;
    transition: background var(--wcl-duration) var(--wcl-easing),
        border-color var(--wcl-duration) var(--wcl-easing),
        transform var(--wcl-duration) var(--wcl-easing);
    text-decoration: none;
}

.wcl-button:hover { transform: translateY(-1px); }
.wcl-button:active { transform: translateY(0); }
.wcl-button:focus-visible {
    outline: 2px solid var(--wcl-color-accent);
    outline-offset: 2px;
}
.wcl-button[disabled] { opacity: 0.5; pointer-events: none; }

.wcl-button--primary {
    background: var(--wcl-color-primary);
    color: var(--wcl-color-primary-fg);
}

.wcl-button--ghost {
    border-color: var(--wcl-color-border);
}

.wcl-button__label-success { color: var(--wcl-color-success); }

/* Filter chips ------------------------------------------------------- */

.wcl-filter-chips {
    display: flex;
    gap: var(--wcl-space-2);
    flex-wrap: wrap;
}

.wcl-chip {
    padding: var(--wcl-space-1) var(--wcl-space-3);
    border-radius: var(--wcl-radius-pill);
    border: 1px solid var(--wcl-color-border);
    background: transparent;
    color: var(--wcl-color-text-muted);
    font-size: var(--wcl-font-size-sm);
    cursor: pointer;
    transition: background var(--wcl-duration) var(--wcl-easing);
}

.wcl-chip.is-active {
    background: var(--wcl-color-primary);
    color: var(--wcl-color-primary-fg);
    border-color: var(--wcl-color-primary);
}

/* Ledger ------------------------------------------------------------- */

.wcl-ledger {
    display: grid;
    gap: var(--wcl-space-2);
}

.wcl-ledger__head,
.wcl-ledger__row {
    display: grid;
    grid-template-columns: 1.4fr 2.6fr 1.4fr 0.9fr;
    gap: var(--wcl-space-3);
    align-items: center;
    padding: var(--wcl-space-3) 0;
    border-bottom: 1px solid var(--wcl-color-border);
}

.wcl-ledger__head {
    font-size: var(--wcl-font-size-sm);
    color: var(--wcl-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--wcl-font-weight-medium);
}

.wcl-ledger__type {
    display: inline-flex;
    align-items: center;
    gap: var(--wcl-space-2);
}

.wcl-ledger__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wcl-color-text-muted);
    flex-shrink: 0;
}

.wcl-ledger__dot--earn   { background: var(--wcl-color-success); }
.wcl-ledger__dot--redeem { background: var(--wcl-color-primary); }
.wcl-ledger__dot--refund { background: var(--wcl-color-accent); }
.wcl-ledger__dot--expire { background: var(--wcl-color-danger); }

.wcl-ledger__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--wcl-font-weight-medium);
}

.wcl-ledger__num.is-positive { color: var(--wcl-color-success); }
.wcl-ledger__num.is-negative { color: var(--wcl-color-danger); }

.wcl-ledger__row.is-hidden { display: none; }

@media (max-width: 600px) {
    .wcl-ledger__head { display: none; }
    .wcl-ledger__row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "type num"
            "desc desc"
            "date date";
    }
    .wcl-ledger__type { grid-area: type; }
    .wcl-ledger__num  { grid-area: num; }
    .wcl-ledger__desc { grid-area: desc; }
    .wcl-ledger__date { grid-area: date; color: var(--wcl-color-text-muted); font-size: var(--wcl-font-size-sm); }
}

/* Rewards ------------------------------------------------------------ */

.wcl-reward-grid {
    display: grid;
    gap: var(--wcl-space-4);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.wcl-reward {
    display: flex;
    flex-direction: column;
    gap: var(--wcl-space-3);
    padding: var(--wcl-space-4);
    border: 1px solid var(--wcl-color-border);
    border-radius: var(--wcl-radius-md);
    background: var(--wcl-color-bg);
    transition: transform var(--wcl-duration) var(--wcl-easing),
        box-shadow var(--wcl-duration) var(--wcl-easing);
}

.wcl-reward:hover:not(.is-locked) {
    transform: translateY(-2px);
    box-shadow: var(--wcl-shadow-md);
}

.wcl-reward.is-locked {
    filter: grayscale(0.6);
    opacity: 0.85;
}

.wcl-reward__image {
    border-radius: var(--wcl-radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--wcl-color-surface);
}

.wcl-reward__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wcl-reward__name {
    margin: 0;
    font-size: var(--wcl-font-size-base);
    font-weight: var(--wcl-font-weight-semibold);
}

.wcl-reward__desc {
    margin: 0;
    color: var(--wcl-color-text-muted);
    font-size: var(--wcl-font-size-sm);
}

.wcl-reward__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wcl-space-2);
}

.wcl-reward__cost {
    display: inline-flex;
    align-items: baseline;
    gap: var(--wcl-space-1);
    font-weight: var(--wcl-font-weight-semibold);
}

.wcl-reward__cost-unit {
    color: var(--wcl-color-text-muted);
    font-weight: var(--wcl-font-weight-medium);
}

.wcl-reward__lock {
    font-size: var(--wcl-font-size-sm);
    color: var(--wcl-color-text-muted);
    background: var(--wcl-color-surface);
    border-radius: var(--wcl-radius-pill);
    padding: var(--wcl-space-1) var(--wcl-space-3);
}

/* Share / referral --------------------------------------------------- */

.wcl-share {
    display: flex;
    gap: var(--wcl-space-2);
    flex-wrap: wrap;
}

.wcl-share__input {
    flex: 1 1 240px;
    padding: var(--wcl-space-2) var(--wcl-space-3);
    border: 1px solid var(--wcl-color-border);
    border-radius: var(--wcl-radius-md);
    background: var(--wcl-color-bg);
    color: var(--wcl-color-text);
    font-size: var(--wcl-font-size-sm);
}

.wcl-share-quick {
    display: flex;
    gap: var(--wcl-space-2);
    flex-wrap: wrap;
    margin-top: var(--wcl-space-3);
}

.wcl-share-quick__btn {
    padding: var(--wcl-space-1) var(--wcl-space-3);
    border: 1px solid var(--wcl-color-border);
    border-radius: var(--wcl-radius-pill);
    color: var(--wcl-color-text);
    text-decoration: none;
    font-size: var(--wcl-font-size-sm);
    transition: background var(--wcl-duration) var(--wcl-easing);
}

.wcl-share-quick__btn:hover { background: var(--wcl-color-surface); }

.wcl-referral-invite {
    margin-top: var(--wcl-space-4);
}

.wcl-referral-invite__summary {
    cursor: pointer;
    font-size: var(--wcl-font-size-sm);
    color: var(--wcl-color-text-muted);
    margin-bottom: var(--wcl-space-3);
}

.wcl-referral-invite__form {
    display: grid;
    gap: var(--wcl-space-3);
    max-width: 420px;
}

.wcl-field { display: grid; gap: var(--wcl-space-1); }
.wcl-field__label { font-size: var(--wcl-font-size-sm); color: var(--wcl-color-text-muted); }
.wcl-field input {
    padding: var(--wcl-space-2) var(--wcl-space-3);
    border: 1px solid var(--wcl-color-border);
    border-radius: var(--wcl-radius-md);
    background: var(--wcl-color-bg);
    color: var(--wcl-color-text);
    font-size: var(--wcl-font-size-base);
}

.wcl-referral-invite__feedback {
    font-size: var(--wcl-font-size-sm);
    color: var(--wcl-color-text-muted);
    margin: 0;
    min-height: 1.2em;
}

.wcl-referral-invite__feedback.is-success { color: var(--wcl-color-success); }
.wcl-referral-invite__feedback.is-error   { color: var(--wcl-color-danger); }

/* Cart preview ------------------------------------------------------- */

.wcl-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--wcl-color-accent);
    color: var(--wcl-color-primary-fg);
    border-radius: var(--wcl-radius-pill);
    font-size: var(--wcl-font-size-sm);
    font-weight: var(--wcl-font-weight-medium);
}

.wcl-cart-earn-preview td { color: var(--wcl-color-text-muted); }

/* Inline shortcode bits --------------------------------------------- */

.wcl-balance-inline,
.wcl-tier-inline {
    font-weight: var(--wcl-font-weight-medium);
    font-variant-numeric: tabular-nums;
}
/* Pastel preset. Activated when AssetLoader sets theme_preset=soft. */

:root[data-wcl-preset="soft"] {
    --wcl-color-bg: #fafaf7;
    --wcl-color-surface: #ffffff;
    --wcl-color-border: #e7e5e0;
    --wcl-color-accent: #a78bfa;
    --wcl-radius-md: 12px;
    --wcl-radius-lg: 20px;
}
/* Vibrant preset. Activated when AssetLoader sets theme_preset=vibrant. */

:root[data-wcl-preset="vibrant"] {
    --wcl-color-primary: #6366f1;
    --wcl-color-accent: #ec4899;
}