/* ========================================
   知晔星途 Design System v2.0
   继承 v3 Airtable 体系，扩展 Phase 2 组件变量
   ======================================== */

/* ========================================
   CSS Variables - 品牌与色彩
   ======================================== */
:root {
    /* Colors - Brand & Primary */
    --primary: #181d26;
    --primary-active: #0d1218;
    
    /* Colors - Surface */
    --canvas: #ffffff;
    --surface-soft: #f8fafc;
    --surface-strong: #e0e2e6;
    --surface-dark: #181d26;
    --surface-dark-elevated: #1d1f25;
    --hairline: #dddddd;
    --border-strong: #9297a0;
    
    /* Colors - Text */
    --ink: #181d26;
    --body: #333840;
    --muted: #41454d;
    --on-primary: #ffffff;
    --on-dark: #ffffff;
    --text-secondary: #8c8f96;
    
    /* Colors - Signature Cards */
    --signature-coral: #aa2d00;
    --signature-forest: #0a2e0e;
    --signature-cream: #f5e9d4;
    --signature-peach: #fcab79;
    --signature-mint: #a8d8c4;
    
    /* Colors - Semantic */
    --success: #006400;
    --success-bg: #f6ffed;
    --success-border: #39bf45;
    --warning: #d46b08;
    --warning-bg: #fff7e6;
    --warning-border: #ffd591;
    --error: #cf1322;
    --error-bg: #fff1f0;
    --error-border: #ffa39e;
    --info: #1677ff;
    --info-bg: #e6f4ff;
    --info-border: #91caff;
    
    /* Colors - Tag */
    --tag-bg: #f0f5ff;
    --tag-border: #adc6ff;
    --tag-text: #1d39c4;
    --tag-bg-blue: #e6f4ff;
    --tag-bg-green: #f6ffed;
    --tag-bg-orange: #fff7e6;
    --tag-bg-purple: #f9f0ff;
    
    /* Typography */
    --font-display: "Inter Display", "Haas Groot Disp", "Haas", sans-serif;
    --font-body: "Inter", "Haas Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
    
    /* Typography Scale */
    --text-display-lg: 40px;
    --text-title-lg: 24px;
    --text-title-md: 20px;
    --text-title-sm: 18px;
    --text-label-md: 16px;
    --text-body-md: 14px;
    --text-caption: 13px;
    --text-small: 12px;
    
    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --space-xxxl: 64px;
    
    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;
    
    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 500;
    --z-drawer: 400;
    
    /* Layout - SPA view switching */
    --nav-width: 253px;
    --toast-width: 360px;
    --drawer-width: 420px;
}

/* ========================================
   Global Reset
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--body);
    background: var(--canvas);
    height: 100vh;
    overflow: hidden;
    font-size: var(--text-body-md);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--info);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    outline: none;
    font-size: var(--text-body-md);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input, textarea, select {
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    outline: none;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    transition: border-color var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--info);
    box-shadow: 0 0 0 2px var(--info-bg);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* ========================================
   SPA View System - 视图容器
   ======================================== */
.view {
    display: none;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.view.active {
    display: flex;
}

/* ========================================
   Shared Button Styles
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-active);
}

.btn-secondary {
    background: var(--canvas);
    color: var(--ink);
    border: 1px solid var(--hairline);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--body);
    border: 1px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-soft);
}

.btn-danger {
    background: var(--error);
    color: var(--on-primary);
    border: 1px solid var(--error);
}

.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-caption);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-label-md);
}

/* ========================================
   Shared Tag / Badge
   ======================================== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.6;
}

.tag-default {
    background: var(--tag-bg);
    color: var(--tag-text);
    border: 1px solid var(--tag-border);
}

.tag-green {
    background: var(--tag-bg-green);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.tag-orange {
    background: var(--tag-bg-orange);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

.tag-purple {
    background: var(--tag-bg-purple);
    color: #531dab;
    border: 1px solid #d3adf7;
}

/* Status Indicator */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active {
    background: var(--success-border);
}

.status-dot.archived {
    background: var(--text-secondary);
}

.status-dot.degraded {
    background: var(--warning-border);
}

/* ========================================
   Utility Classes
   ======================================== */
.text-muted {
    color: var(--text-secondary);
}

.text-sm {
    font-size: var(--text-caption);
}

.text-xs {
    font-size: var(--text-small);
}

.flex-row {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}