/*
 * Shared UI layer
 * Loaded site-wide after assets/styles.css so global controls can evolve
 * without dragging the heavier marketing theme onto every page.
 */

:root {
    --accent-teal: #65d7d0;
    --accent-teal-strong: #97efe9;
    --theme-transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
    --theme-action-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    --theme-action-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.24);
    --theme-card-border: rgba(255, 255, 255, 0.08);
    --theme-card-bg: linear-gradient(180deg, rgba(16, 27, 31, 0.96), rgba(10, 17, 21, 0.98));
    --theme-card-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    --theme-card-hover-border: rgba(243, 191, 82, 0.34);
    --theme-card-hover-bg: linear-gradient(180deg, rgba(30, 49, 54, 0.94), rgba(14, 23, 28, 0.98));
    --theme-card-hover-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
    --theme-teal-border: rgba(101, 215, 208, 0.24);
    --theme-teal-bg: linear-gradient(180deg, rgba(101, 215, 208, 0.18), rgba(101, 215, 208, 0.08));
    --theme-gold-border: rgba(243, 191, 82, 0.24);
    --theme-gold-bg: linear-gradient(180deg, rgba(243, 191, 82, 0.2), rgba(243, 191, 82, 0.08));
}

.pill,
.chip,
.page-link,
.ghost-button,
.action-link,
.favorite-button,
.primary-button {
    transition: var(--theme-transition);
}

.ghost-button,
.primary-button {
    min-height: 46px;
    padding: 0 18px;
    font: 700 0.9rem/1 Bahnschrift, "Arial Narrow", sans-serif;
    letter-spacing: 0.04em;
    box-shadow: var(--theme-action-shadow);
}

.ghost-button {
    border-color: rgba(101, 215, 208, 0.18);
    background: linear-gradient(180deg, rgba(13, 24, 28, 0.98), rgba(9, 17, 21, 0.98));
}

.ghost-button:hover,
.primary-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--theme-action-shadow-hover);
}

.ghost-button:hover {
    border-color: rgba(101, 215, 208, 0.38);
    background: linear-gradient(180deg, rgba(25, 42, 47, 0.98), rgba(11, 20, 24, 0.98));
}