/* ══════════════════════════════════════════════════════════════════════
 * PREMO shared components — site header, chip, button variants
 *
 * Loaded after app.css. Used by both the order process and customer
 * portal. Rules append to the existing components layer.
 * ══════════════════════════════════════════════════════════════════════ */

@layer components {

/* ── Site header ───────────────────────────────────────────────────── */

.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.97) 0%, transparent 100%);
    transition: background var(--transition-normal), border-color var(--transition-normal);
    border-block-end: 1px solid transparent;
}

.site-header[data-solid] {
    background: rgba(14, 14, 14, 0.97);
    backdrop-filter: blur(12px);
    border-block-end-color: var(--color-border);
}

.site-header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.site-header-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: absolute;
    right: var(--space-4);
    top: 0;
}

.site-header-logo:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: var(--space-1);
    border-radius: var(--radius-sm);
}

.site-header-logo img {
    width: auto;
    height: 5rem;
}

@media (min-width: 768px) {
    .site-header {
        padding: var(--space-3) var(--space-8);
    }

    .site-header-logo {
        right: var(--space-8);
    }

    .site-header-logo svg {
        height: 6rem;
    }
}

/* ── Ghost button (header actions) ─────────────────────────────────── */

.btn-ghost {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-ghost:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Button variants (gold, outline, back) ─────────────────────────── */

.btn[data-variant="gold"] {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: var(--color-text-inverse);
    box-shadow: 0 var(--space-1) 1.125rem color-mix(in srgb, var(--color-primary) 30%, transparent);
    gap: var(--space-2);
    border-radius: var(--radius-md);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn[data-variant="gold"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 var(--space-2) 1.75rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.btn[data-variant="gold"]:active {
    transform: translateY(0);
}

.btn[data-variant="gold"]:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.btn[data-variant="gold"][data-size="lg"] {
    padding: var(--space-4) var(--space-10);
    font-size: var(--text-lg);
}

.btn[data-variant="outline"] {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted);
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn[data-variant="outline"]:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text);
}

.btn[data-variant="outline"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn[data-variant="outline"][data-tone="danger"] {
    --btn-border: color-mix(in srgb, var(--color-danger) 30%, transparent);
    --btn-color: var(--color-danger);

    border-color: var(--btn-border);
    color: var(--btn-color);
}

.btn[data-variant="outline"][data-tone="danger"]:hover {
    border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
    color: var(--color-danger);
}

.btn[data-variant="back"] {
    background: none;
    border: none;
    color: var(--color-text-faint);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    transition: color var(--transition-fast);
    gap: var(--space-1);
}

.btn[data-variant="back"]:hover {
    color: var(--color-text);
}

/* ── Chip (status badge) ───────────────────────────────────────────── */

.chip {
    --chip-bg: var(--color-surface);
    --chip-color: var(--color-text-muted);
    --chip-border: var(--color-border);

    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    background: var(--chip-bg);
    color: var(--chip-color);
    border: 1px solid var(--chip-border);
}

.chip[data-variant="success"] {
    --chip-bg: color-mix(in srgb, var(--color-success) 12%, transparent);
    --chip-color: var(--color-success);
    --chip-border: color-mix(in srgb, var(--color-success) 25%, transparent);
}

.chip[data-variant="warning"] {
    --chip-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
    --chip-color: var(--color-warning);
    --chip-border: color-mix(in srgb, var(--color-warning) 25%, transparent);
}

.chip[data-variant="danger"] {
    --chip-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
    --chip-color: var(--color-danger);
    --chip-border: color-mix(in srgb, var(--color-danger) 25%, transparent);
}

} /* end @layer components */