/* Shared browser UI primitives. Page-specific styles remain authoritative. */
:root {
    --flask-ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

    --flask-ui-color-surface: #ffffff;
    --flask-ui-color-surface-muted: #f1f5f9;
    --flask-ui-color-layout: #f6f8fc;
    --flask-ui-color-text: #0f172a;
    --flask-ui-color-text-muted: #64748b;
    --flask-ui-color-border: #cbd5e1;
    --flask-ui-color-primary: #2563eb;
    --flask-ui-color-primary-text: #2563eb;
    --flask-ui-color-primary-hover: #1d4ed8;
    --flask-ui-color-primary-active: #1e40af;
    --flask-ui-color-on-primary: #ffffff;
    --flask-ui-color-primary-soft: #eff6ff;
    --flask-ui-color-accent: #0d9488;
    --flask-ui-color-accent-soft: #e6fffb;
    --flask-ui-color-success: #15803d;
    --flask-ui-color-warning: #b45309;
    --flask-ui-color-error: #dc2626;

    --flask-ui-radius-xs: 4px;
    --flask-ui-radius-sm: 6px;
    --flask-ui-radius-md: 8px;
    --flask-ui-radius-lg: 12px;
    --flask-ui-radius-xl: 16px;
    --flask-ui-radius-pill: 999px;
    --flask-ui-radius-round: 50%;

    --flask-ui-shadow-none: none;
    --flask-ui-control-height: 40px;
    --flask-ui-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.16);
    --flask-ui-motion-fast: 0.2s ease;

    --flask-ui-chart-blue: #2563eb;
    --flask-ui-chart-green: #15803d;
    --flask-ui-chart-yellow: #d97706;
    --flask-ui-chart-red: #dc2626;
    --flask-ui-chart-cyan: #0d9488;
    --flask-ui-chart-purple: #7c3aed;
}

:root[data-theme="dark"] {
    --flask-ui-color-surface: #111c2e;
    --flask-ui-color-surface-muted: #152238;
    --flask-ui-color-layout: #0b1220;
    --flask-ui-color-text: #e2e8f0;
    --flask-ui-color-text-muted: #94a3b8;
    --flask-ui-color-border: #334155;
    --flask-ui-color-primary: #60a5fa;
    --flask-ui-color-primary-text: #93c5fd;
    --flask-ui-color-primary-hover: #93c5fd;
    --flask-ui-color-primary-active: #3b82f6;
    --flask-ui-color-on-primary: #0b1220;
    --flask-ui-color-primary-soft: #152c4d;
    --flask-ui-color-accent: #2dd4bf;
    --flask-ui-color-accent-soft: #123833;
    --flask-ui-chart-blue: #60a5fa;
    --flask-ui-chart-green: #4ade80;
    --flask-ui-chart-yellow: #fbbf24;
    --flask-ui-chart-red: #f87171;
    --flask-ui-chart-cyan: #2dd4bf;
    --flask-ui-chart-purple: #a78bfa;
}

/* Low-specificity compatibility layer: existing page classes and selectors win. */
:where(.btn, .analysis-btn, .msg-btn) {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

:where(.btn, .analysis-btn, .msg-btn):focus-visible {
    outline: 2px solid var(--flask-ui-color-primary);
    outline-offset: 2px;
}

:where(.btn, .analysis-btn, .msg-btn):disabled,
:where(.btn, .analysis-btn, .msg-btn)[aria-disabled="true"] {
    cursor: not-allowed;
}

:where(.btn, .analysis-btn, .msg-btn) > :where(.bi, .anticon, [class^="fa-"], [class*=" fa-"], svg) {
    flex: 0 0 auto;
    line-height: 1;
}

.flask-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--flask-ui-control-height);
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--flask-ui-radius-md);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--flask-ui-motion-fast), border-color var(--flask-ui-motion-fast), color var(--flask-ui-motion-fast);
}

.flask-ui-btn-primary {
    color: var(--flask-ui-color-on-primary);
    background: var(--flask-ui-color-primary);
    border-color: var(--flask-ui-color-primary);
}

.flask-ui-btn-primary:hover {
    background: var(--flask-ui-color-primary-hover);
    border-color: var(--flask-ui-color-primary-hover);
}

.flask-ui-btn-primary:active {
    background: var(--flask-ui-color-primary-active);
    border-color: var(--flask-ui-color-primary-active);
}

.flask-ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}