/* Shared UI tokens used by multiple page-specific stylesheets. */

:root {
    --motion-fast: 0.16s;
    --motion-base: 0.2s;
    --motion-emphasis: 0.28s;
    --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-lift-sm: translateY(-1px);
    --motion-lift-md: translateY(-2px);
    --motion-press: translateY(0) scale(0.98);
    /* Shared chart style contract (Chart.js + mini bar widgets) */
    --gm-chart-bar-border-width: 0;
    --gm-chart-bar-radius: 0px;
    --gm-chart-bar-alpha: 0.62;
    --gm-chart-line-fill-alpha: 0.14;
    --gm-chart-pie-alpha: 0.72;
    --gm-chart-tooltip-bg-alpha: 0.96;
    --gm-chart-tooltip-border-alpha: 0.72;
    --gm-chart-grid-alpha: 0.42;
    --gm-chart-role-segment-alpha: 0.76;
    --gm-chart-mini-track-mix: 12%;
    --gm-chart-mini-fill-mix: 76%;
}

[data-theme="dark"] {
    --gm-chart-bar-alpha: 0.66;
    --gm-chart-line-fill-alpha: 0.18;
    --gm-chart-pie-alpha: 0.76;
    --gm-chart-tooltip-bg-alpha: 0.94;
    --gm-chart-tooltip-border-alpha: 0.78;
    --gm-chart-grid-alpha: 0.52;
    --gm-chart-role-segment-alpha: 0.8;
    --gm-chart-mini-track-mix: 16%;
    --gm-chart-mini-fill-mix: 82%;
}

body[data-page="dashboard"],
body[data-page="messages"],
body[data-page="analytics"],
body[data-page="directory"],
body[data-page="compare"],
body[data-page="leaderboards"],
body[data-page="groups"],
body[data-page="group-detail"],
body[data-page="map"],
body[data-page="info"],
body[data-page="info-detail"],
body[data-page="help"],
body[data-page="help-groups"] {
    --gm-page-subtitle-size: 0.95rem;
    --gm-page-subtitle-line: 1.45;
    --gm-section-gap: 16px;
    --gm-panel-padding: 16px;
    --gm-panel-radius: 12px;
    --gm-title-size: clamp(1.03rem, 0.98rem + 0.28vw, 1.2rem);
    --gm-title-line: 1.24;
    --gm-label-size: 0.78rem;
    --gm-metadata-size: 0.82rem;
    --gm-numeric-size: clamp(1.45rem, 1.2rem + 0.75vw, 1.95rem);
    --dashboard-control-height: 34px;
    --dashboard-control-padding-x: 12px;
    --dashboard-control-font-size: 0.78rem;
    --dashboard-control-font-family: var(--font-heading);
    --dashboard-control-font-weight: 650;
    --dashboard-pill-radius: 999px;
    --dashboard-border-default: 1px solid var(--border-color);
    --dashboard-control-border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    --dashboard-control-border-hover: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    --dashboard-control-bg: color-mix(in srgb, var(--card-bg) 94%, transparent);
    --dashboard-control-bg-hover: color-mix(in srgb, var(--accent-color) 11%, var(--card-bg));
    --dashboard-control-shadow-hover: 0 6px 14px color-mix(in srgb, var(--accent-color) 24%, transparent);
    --dashboard-control-shadow-active: 0 7px 16px color-mix(in srgb, var(--accent-color) 30%, transparent);
    --dashboard-surface-border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    --dashboard-panel-radius: 10px;
    --dashboard-panel-padding: 10px;
    --dashboard-panel-soft-bg: color-mix(in srgb, var(--stat-bg) 42%, transparent);
    --dashboard-focus-ring: 2px solid color-mix(in srgb, var(--accent-color) 46%, transparent);
    --dashboard-focus-offset: 2px;
}

body[data-page="map"] {
    --map-border-default: 1px solid var(--border-color);
    --map-surface-border: var(--dashboard-surface-border);
    --map-control-border: var(--dashboard-control-border);
    --map-control-border-hover: var(--dashboard-control-border-hover);
    --map-control-bg: color-mix(in srgb, var(--card-bg) 94%, transparent);
    --map-control-bg-hover: color-mix(in srgb, var(--accent-color) 10%, var(--card-bg));
    --map-control-font-weight: 650;
    --map-control-shadow-hover: var(--dashboard-control-shadow-hover);
    --map-panel-radius: 10px;
    --map-panel-padding: 15px;
    --map-panel-shadow: 0 5px 15px var(--shadow);
    --map-pill-radius: 999px;
    --map-control-height: 34px;
    --map-focus-ring: 2px solid color-mix(in srgb, var(--accent-color) 46%, transparent);
}

body[data-page="analytics"] {
    --analytics-control-height: 34px;
    --analytics-control-padding-x: 12px;
    --analytics-control-font-size: 0.78rem;
    --analytics-control-font-family: var(--font-heading);
    --analytics-control-font-weight: 650;
    --analytics-pill-radius: 999px;
    --analytics-panel-radius: var(--gm-panel-radius);
    --analytics-border-default: var(--dashboard-control-border);
    --analytics-control-border-hover: var(--dashboard-control-border-hover);
    --analytics-control-bg: var(--dashboard-control-bg);
    --analytics-control-bg-hover: var(--dashboard-control-bg-hover);
    --analytics-control-shadow-hover: var(--dashboard-control-shadow-hover);
    --analytics-control-shadow-active: var(--dashboard-control-shadow-active);
    --analytics-surface-border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    --analytics-focus-ring: 2px solid color-mix(in srgb, var(--accent-color) 46%, transparent);
}

body[data-page="compare"] {
    --compare-control-height: var(--dashboard-control-height);
    --compare-pill-radius: var(--dashboard-pill-radius);
    --compare-panel-radius: 15px;
    --compare-border-default: var(--dashboard-control-border);
    --compare-surface-border: var(--dashboard-surface-border);
    --compare-focus-ring: var(--dashboard-focus-ring);
}

body[data-page="node"] {
    --node-control-height: 36px;
    --node-pill-radius: 999px;
    --node-panel-radius: 12px;
    --node-border-default: 1px solid var(--border-color);
    --node-surface-border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    --node-focus-ring: 2px solid color-mix(in srgb, var(--accent-color) 46%, transparent);
}

.admin-page {
    --admin-control-height: 34px;
    --admin-pill-radius: 999px;
    --admin-radius-md: 8px;
    --admin-panel-radius: 10px;
    --admin-border-default: 1px solid var(--border);
    --admin-surface-border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    --admin-focus-ring: 2px solid color-mix(in srgb, var(--accent-color, var(--accent)) 46%, transparent);
}

/* Primary surface style: match dashboard hero/messages-preview treatment */
:where(
    body[data-page="messages"] .page-subnav,
    body[data-page="messages"] .messages,
    body[data-page="messages"] .messages-export-section,
    body[data-page="map"] .map-container,
    body[data-page="map"] .map-controls,
    body[data-page="map"] .map-legend,
    body[data-page="map"] .stats-overlay,
    body[data-page="info"] .info-subnav,
    body[data-page="info"] .info-section-head,
    body[data-page="info-detail"] .info-subnav,
    body[data-page="info-detail"] .info-detail-content,
    body[data-page="help"] .info-subnav,
    body[data-page="help"] .search-box,
    body[data-page="help"] .category-tabs,
    body[data-page="help-groups"] .info-subnav,
    body[data-page="help-groups"] .info-detail-content,
    body[data-page="analytics"] .analytics-filters,
    body[data-page="analytics"] .analytics-detailed-section,
    body[data-page="directory"] .directory-controls,
    body[data-page="compare"] .selection-section,
    body[data-page="compare"] .comparison-header,
    body[data-page="leaderboards"] .leaderboard-card,
    body[data-page="groups"] .groups-toolbar.card-shell,
    body[data-page="group-detail"] .group-detail-header.card-shell,
    body[data-page="badges"] .intro-section,
    body[data-page="badges"] .category-tabs,
    body[data-page="badges"] .tips-section
) {
    border: var(--dashboard-surface-border);
    border-top: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    background:
        radial-gradient(130% 90% at 102% -18%, color-mix(in srgb, var(--accent-color) 6%, transparent), transparent 60%),
        var(--card-bg);
}

body[data-page="map"] :is(.map-controls, .map-legend, .stats-overlay) {
    background:
        radial-gradient(130% 90% at 102% -18%, color-mix(in srgb, var(--accent-color) 6%, transparent), transparent 60%),
        color-mix(in srgb, var(--card-bg) 89%, transparent);
}