/*
 * Shared site/customer design contract.
 * Site themes override these variables; homepage and customer panel consume
 * the same token set so one visual change does not require scattered edits.
 */
:root {
    --ui-font: "Jura", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --ui-bg: #f8fbfb;
    --ui-bg-soft: #eef8f5;
    --ui-surface: rgba(255, 255, 255, 0.9);
    --ui-surface-strong: rgba(255, 255, 255, 0.98);
    --ui-surface-muted: rgba(233, 247, 242, 0.78);
    --ui-text: #173745;
    --ui-text-strong: #0f2933;
    --ui-text-muted: #66808a;
    --ui-accent: #0f766e;
    --ui-accent-soft: #7bd8bf;
    --ui-accent-contrast: #ffffff;
    --ui-line: rgba(15, 118, 110, 0.14);
    --ui-line-strong: rgba(15, 118, 110, 0.24);
    --ui-shadow: 0 24px 70px rgba(23, 55, 69, 0.12);
    --ui-shadow-soft: 0 14px 36px rgba(23, 55, 69, 0.08);
    --ui-radius-xs: 10px;
    --ui-radius-sm: 14px;
    --ui-radius-md: 18px;
    --ui-radius-lg: 26px;
    --ui-radius-pill: 999px;
    --ui-sidebar-width: 118px;
    --ui-topbar-height: 96px;
    --ui-page-gap: clamp(18px, 2vw, 32px);
    --ui-card-pad: clamp(20px, 2vw, 32px);
    --ui-button-h: 48px;
    --ui-input-h: 58px;
}

body {
    font-family: var(--ui-font);
}

body.theme-snowflake.snowflake-dark-mode,
body.snowflake-dark-mode {
    --ui-bg: #071216;
    --ui-bg-soft: #0b1d22;
    --ui-surface: rgba(15, 44, 50, 0.78);
    --ui-surface-strong: rgba(18, 53, 60, 0.94);
    --ui-surface-muted: rgba(15, 44, 50, 0.58);
    --ui-text: #eaf7f3;
    --ui-text-strong: #ffffff;
    --ui-text-muted: #aec6bd;
    --ui-accent: #0f8b80;
    --ui-accent-soft: #77dec5;
    --ui-accent-contrast: #ffffff;
    --ui-line: rgba(119, 222, 197, 0.16);
    --ui-line-strong: rgba(119, 222, 197, 0.3);
    --ui-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
    --ui-shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.24);
}

.ui-card,
.card,
.stat-card,
.panel-card,
.dashboard-card,
.settings-section,
.theme-card,
.license-card,
.ticket-card,
.market-card,
.product-card,
.content-card,
.news-card,
.post-card {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-soft);
}

.ui-card h1,
.ui-card h2,
.ui-card h3,
.card h1,
.card h2,
.card h3,
.stat-card h1,
.stat-card h2,
.stat-card h3,
.panel-card h1,
.panel-card h2,
.panel-card h3,
.dashboard-card h1,
.dashboard-card h2,
.dashboard-card h3,
.settings-section h1,
.settings-section h2,
.settings-section h3 {
    color: var(--ui-text-strong);
}

.ui-card p,
.ui-card small,
.card p,
.card small,
.panel-card p,
.panel-card small,
.dashboard-card p,
.dashboard-card small,
.settings-section p,
.settings-section small,
.muted {
    color: var(--ui-text-muted);
}

.button,
button,
input[type="submit"] {
    border-radius: var(--ui-radius-sm);
}

.button,
button:not(.nav-group-toggle):not(.user-menu-button):not(.mobile-dock-button),
input[type="submit"] {
    min-height: var(--ui-button-h);
}

input,
select,
textarea {
    border-color: var(--ui-line);
    border-radius: var(--ui-radius-md);
}

.user-avatar,
.avatar {
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.user-avatar img,
.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}