/**
 * 文件路径: /opt/captive-portal/static/css/base.css
 * 文件说明: 全局重置、基础排版、滚动条 —— 依赖 tokens.css
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--brand);
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ==================== 字号刻度 ==================== */
.text-display { font-size: var(--text-display); font-weight: 900; line-height: var(--leading-tight); letter-spacing: -.025em; text-wrap: balance; }
.text-h1 { font-size: var(--text-h1); font-weight: 900; line-height: var(--leading-tight); letter-spacing: -.02em; text-wrap: balance; }
.text-h2 { font-size: var(--text-h2); font-weight: 800; line-height: var(--leading-tight); letter-spacing: -.015em; text-wrap: balance; }
.text-h3 { font-size: var(--text-h3); font-weight: 800; line-height: var(--leading-tight); letter-spacing: -.01em; }
.text-body-lg { font-size: var(--text-body-lg); }
.text-body { font-size: var(--text-body); }
.text-body-sm { font-size: var(--text-body-sm); }
.text-caption { font-size: var(--text-caption); color: var(--text-secondary); }
.text-secondary { color: var(--text-secondary); }

/* 衬线斜体点缀：仅用于引导语/副标题一类的一小段文字，不用于正文大段内容 */
.text-accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    color: var(--text-secondary);
}

/* 表格数值/统计数字：等宽数字，避免小数点对不齐 */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* 小型大写字母标签：编号步骤/分组标题一类的微标签 */
.label-caps {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ==================== 容器 ==================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5);
}

/* ==================== 工具类 ==================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mt-4 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.mb-4 { margin-bottom: var(--space-8); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-2); }
.p-2 { padding: var(--space-4); }
.p-3 { padding: var(--space-6); }
.p-4 { padding: var(--space-8); }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* ==================== 栅格系统 ==================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--space-3) * -1);
}

.col { flex: 1; padding: 0 var(--space-3); }
.col-2 { flex: 0 0 50%; max-width: 50%; padding: 0 var(--space-3); }
.col-3 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 var(--space-3); }
.col-4 { flex: 0 0 25%; max-width: 25%; padding: 0 var(--space-3); }

@media (max-width: 768px) {
    .container { padding: var(--space-3); }
    .col-2, .col-3, .col-4 { flex: 0 0 100%; max-width: 100%; }
}

/* ==================== 代码块 ==================== */
code {
    padding: 2px 6px;
    background: var(--bg-surface-alt);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
    color: var(--brand-active);
}

pre {
    background: var(--color-gray-900);
    color: var(--color-gray-100);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-body-sm);
    line-height: var(--leading-normal);
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ==================== 滚动条美化 ==================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-surface-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ==================== 动画 ==================== */
.fade-in { animation: fadeIn var(--duration-base) ease-in; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in { animation: slideIn var(--duration-base) ease-out; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}