/* refinements.css — purely additive, load last */

/* ── Page enter animation ────────────────────────────────── */
@keyframes rf-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rf-enter {
    animation: rf-page-in 0.18s ease-out both;
}

/* -- Text contrast - LUMINA light (slate/mineral). This selector is now
   always active since dark mode was dropped; kept in sync with main.css. -- */
:root:not([data-theme="light"]) {
    --text-secondary: var(--ds-text-secondary);
    --text-hint: var(--ds-text-tertiary);
}

/* ── POS category pill contrast (P2) ────────────────────── */
.pos-cat-btn {
    color: var(--text-secondary);
}
/* The active chip was ink-filled under LUMINA, so this forced the label white.
   Wave 5 (B60 OS) changed the fill to a light tint, --ds-primary-tint #EEF2FF,
   and this override was never retired -- leaving white text on near-white at a
   measured 1.12:1, effectively invisible. The label now inherits pos.css, which
   uses --ds-primary on the tint (5.6:1) and matches .ds-tab.is-active. */

/* ── Gold balance: calm the tab halo (P3) ───────────────── */
.pos-order-tab.active {
    box-shadow: var(--shadow-sm), var(--rim-light);
    border-color: rgba(var(--gold-rgb), 0.55);
}
.pos-order-tab.active::after {
    box-shadow: none;
}
/* Tab cart amount neutral until active */
.pos-order-tab:not(.active) .tab-total {
    color: var(--text-secondary);
}

/* ── Product monogram tile (P1) ──────────────────────────── */
.product-monogram {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    /* C2: neutral pearl image well, slate initials. Gold is reserved for the
       price only (Law 4) -- the monogram tile is not a money moment. */
    background: var(--bg-elevated);
    color: var(--text-secondary);
    user-select: none;
    box-shadow: inset 0 0 0 1px var(--border-default);
}

/* ── Numeric table cells (P4) ────────────────────────────── */
th.num,
td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
th.num {
    color: var(--text-secondary);
}

/* ── Touch sizing for coarse pointers ────────────────────── */
@media (pointer: coarse) {
    .pos-cat-btn {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .pos-order-tab {
        min-height: 44px;
    }
    .nav-item {
        min-height: 44px;
    }
}