/* ============================================================
   COMPONENTS: the reusable pieces. Each has one canonical class
   and modifiers (--variant, --size). No page-specific rules here.
   ============================================================ */

/* ---- Button: .btn + --primary | --secondary | --soft | --ghost; --sm; --block ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding: 0.75rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: var(--color-text-strong);
    background: transparent;
    transition: transform var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; transform: none; box-shadow: none; }

.btn--primary { background: var(--gradient-accent); box-shadow: var(--shadow-glow); }
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-glow-strong); }

.btn--secondary { border-color: var(--color-border-strong); }
.btn--secondary:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-tint); }
.btn--secondary.copied { border-color: var(--color-success); color: var(--color-success); }

.btn--soft {
    background: var(--color-accent-tint);
    border-color: var(--color-border-strong);
    color: var(--color-accent-soft);
}
.btn--soft:hover:not(:disabled) { background: var(--color-accent); color: var(--color-text-on-accent); }

.btn--ghost { border-color: var(--color-border-strong); color: var(--color-text-muted); }
.btn--ghost:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-text-strong); }

.btn--sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: var(--text-xs); }
.btn--block { display: flex; width: 100%; }

/* ---- Link with arrow ---- */
.link-arrow { color: var(--color-accent-soft); font-weight: 600; font-size: var(--text-sm); }
.link-arrow:hover { color: var(--color-text-strong); }

/* ---- Chip (filter and size selectors): .chip.active ---- */
.chip {
    min-height: 36px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
    transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}
.chip:hover { border-color: var(--color-border-strong); color: var(--color-text-strong); }
.chip.active { background: var(--color-accent); border-color: transparent; color: var(--color-text-on-accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- Badge: .badge + --success | --accent | --muted ---- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}
.badge--success { background: var(--color-success-tint); border-color: var(--color-success-line); color: var(--color-success); }
.badge--accent { background: var(--gradient-accent); color: var(--color-text-on-accent); box-shadow: 0 0 14px var(--color-accent-glow); }
.badge--muted { background: var(--color-divider); color: var(--color-text-subtle); }

/* ---- Alert: .alert + --info | --success | --error ---- */
.alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-accent-tint);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}
.alert strong { color: var(--color-text-strong); }
.alert--success { background: var(--color-success-tint); border-color: var(--color-success-line); color: var(--color-success); }
.alert--success strong { color: var(--color-success); }
.alert--error { background: var(--color-danger-tint); border-color: var(--color-danger-line); color: var(--color-danger-text); }
.alert > ul { margin: 0; padding: 0; list-style: none; }

/* ---- Form field ---- */
.field { margin-bottom: var(--space-4); }
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
}
.form-input {
    width: 100%;
    min-height: var(--touch-target);
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: var(--text-md);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.form-input::placeholder { color: var(--color-text-subtle); }
.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-tint-strong);
}
textarea.form-input { min-height: 8rem; resize: vertical; }
.form-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form-input--upper { text-transform: uppercase; }
.form-hint { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-subtle); }
.check-row { display: flex; align-items: center; gap: var(--space-2); }
.check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); }
.check-row .form-label { margin: 0; }

/* ---- Quantity stepper ---- */
.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.qty-btn {
    width: var(--touch-target);
    height: var(--touch-target);
    border: 0;
    background: transparent;
    color: var(--color-text-strong);
    font-size: var(--text-lg);
}
.qty-btn:hover { background: var(--color-accent-tint); }
.qty-num { min-width: 2.5rem; text-align: center; font-weight: 700; color: var(--color-text-strong); }

/* ---- Card ---- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.card--interactive { transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base), box-shadow var(--duration-base); }
.card--interactive:hover { transform: translateY(-4px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

/* ---- Data table ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; font-size: var(--text-sm); }
.table th {
    padding: var(--space-3) var(--space-3);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}
.table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    white-space: nowrap;
}
.table tr:last-child td { border-bottom: 0; }
.table-empty { padding: var(--space-6); text-align: center; color: var(--color-text-subtle); }

/* ---- Price ---- */
.price { font-family: var(--font-display); font-weight: 700; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.price-strike { margin-right: 0.4em; color: var(--color-text-subtle); text-decoration: line-through; font-weight: 500; font-size: 0.85em; }

/* ---- Section label and heading ---- */
.eyebrow {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-soft);
}
.gradient-text {
    background: var(--gradient-accent-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Empty / status block ---- */
.empty-state { padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); }
.empty-state .icon { margin-bottom: var(--space-4); color: var(--color-accent-soft); }

/* ---- Icon sizing for inline SVG ---- */
.icon { display: inline-flex; flex-shrink: 0; }
.icon svg { width: var(--icon-size, 1.25rem); height: var(--icon-size, 1.25rem); }
.icon--lg { --icon-size: 2.5rem; }