/* ============================================
   fanyihong.work Design System
   黑暗史诗设计规范 v1.0
   ============================================ */

:root {
    /* ===== Core Palette ===== */
    --ds-bg-primary:    #0a0a0a;
    --ds-bg-secondary:  #1a1a1a;
    --ds-bg-tertiary:   #111118;
    --ds-bg-card:       rgba(18, 18, 24, 0.9);
    --ds-bg-card-hover: rgba(24, 24, 32, 0.95);

    /* ===== Gold Accent System ===== */
    --ds-gold:          #c9a227;
    --ds-gold-light:    #ffd700;
    --ds-gold-dark:     #b8860b;
    --ds-gold-glow:     rgba(201, 162, 39, 0.15);
    --ds-gold-border:   rgba(201, 162, 39, 0.2);
    --ds-gold-border-h: rgba(201, 162, 39, 0.4);

    /* ===== Text Colors ===== */
    --ds-text-primary:  #e0dcd4;
    --ds-text-secondary:#aaa;
    --ds-text-muted:    #777;
    --ds-text-dim:      #555;
    --ds-text-faint:    #444;

    /* ===== Semantic Colors ===== */
    --ds-danger:        #e06050;
    --ds-info:          #50a0e0;
    --ds-success:       #50c878;
    --ds-warning:       #e0a050;

    /* ===== Borders ===== */
    --ds-border:        #333;
    --ds-border-light:  rgba(201, 162, 39, 0.12);
    --ds-border-hover:  rgba(201, 162, 39, 0.3);

    /* ===== Typography ===== */
    --ds-font-serif:    'Georgia', 'Noto Serif SC', serif;
    --ds-font-sans:     'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --ds-font-mono:     'Fira Code', 'Consolas', monospace;

    --ds-text-xs:   0.75rem;
    --ds-text-sm:   0.85rem;
    --ds-text-base: 0.95rem;
    --ds-text-lg:   1.1rem;
    --ds-text-xl:   1.4rem;
    --ds-text-2xl:  2rem;
    --ds-text-3xl:  2.5rem;

    /* ===== Spacing ===== */
    --ds-space-xs:  8px;
    --ds-space-sm:  12px;
    --ds-space-md:  20px;
    --ds-space-lg:  30px;
    --ds-space-xl:  50px;
    --ds-space-2xl: 80px;

    /* ===== Radius ===== */
    --ds-radius-sm: 4px;
    --ds-radius-md: 8px;
    --ds-radius-lg: 12px;
    --ds-radius-pill: 20px;

    /* ===== Shadows ===== */
    --ds-shadow-card:    0 4px 20px rgba(0, 0, 0, 0.4);
    --ds-shadow-card-h:  0 4px 30px rgba(0, 0, 0, 0.5);
    --ds-shadow-text:    2px 2px 4px rgba(0, 0, 0, 0.8);
    --ds-shadow-glow:    0 0 40px rgba(201, 162, 39, 0.15);

    /* ===== Transitions ===== */
    --ds-transition:     all 0.3s ease;
    --ds-transition-fast: all 0.15s ease;
    --ds-transition-slow: all 0.5s ease;

    /* ===== Layout ===== */
    --ds-max-width:      1200px;
    --ds-container-pad:  20px;
}

/* ===== Base Reset for Modules ===== */
body.ds-base {
    margin: 0;
    padding: 0;
    background: linear-gradient(160deg, var(--ds-bg-primary) 0%, var(--ds-bg-tertiary) 40%, var(--ds-bg-primary) 100%);
    color: var(--ds-text-primary);
    font-family: var(--ds-font-serif);
    line-height: 1.85;
    min-height: 100vh;
}

/* ===== Utility: Back Link ===== */
.ds-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ds-text-muted);
    text-decoration: none;
    font-size: var(--ds-text-sm);
    padding: var(--ds-space-xs) 0;
    transition: var(--ds-transition);
}
.ds-back-link:hover { color: var(--ds-gold); }

/* ===== Utility: Section Title ===== */
.ds-section-title {
    font-size: var(--ds-text-xl);
    color: var(--ds-gold);
    margin-bottom: var(--ds-space-md);
    padding-bottom: var(--ds-space-xs);
    border-bottom: 2px solid var(--ds-gold);
    font-weight: 600;
}

/* ===== Utility: Card ===== */
.ds-card {
    background: var(--ds-bg-card);
    border: 1px solid var(--ds-border-light);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-lg);
    box-shadow: var(--ds-shadow-card);
    transition: var(--ds-transition);
}
.ds-card:hover {
    border-color: var(--ds-border-hover);
    box-shadow: var(--ds-shadow-card-h);
}

/* ===== Utility: Gold Divider ===== */
.ds-divider {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ds-gold), transparent);
    margin: var(--ds-space-md) auto;
    border: none;
}

/* ===== Utility: Badge ===== */
.ds-badge {
    display: inline-block;
    font-size: var(--ds-text-xs);
    padding: 3px 12px;
    border-radius: var(--ds-radius-pill);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ===== Utility: Quote ===== */
.ds-quote {
    font-style: italic;
    color: var(--ds-text-muted);
    border-left: 3px solid var(--ds-gold-border-h);
    padding: var(--ds-space-xs) var(--ds-space-md);
    margin: var(--ds-space-sm) 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0;
}

/* ===== Utility: Button ===== */
.ds-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--ds-gold-border);
    color: var(--ds-gold);
    font-family: var(--ds-font-serif);
    font-size: var(--ds-text-sm);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ds-transition);
}
.ds-btn:hover {
    background: var(--ds-gold-glow);
    border-color: var(--ds-gold);
    box-shadow: var(--ds-shadow-glow);
}
.ds-btn-primary {
    background: linear-gradient(135deg, var(--ds-gold-dark), var(--ds-gold));
    color: #0a0a0a;
    border-color: var(--ds-gold);
    font-weight: 600;
}
.ds-btn-primary:hover {
    background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-light));
}

/* ===== Utility: Footer ===== */
.ds-footer {
    text-align: center;
    padding: var(--ds-space-md);
    color: var(--ds-text-faint);
    font-size: var(--ds-text-xs);
    border-top: 1px solid var(--ds-border-light);
    margin-top: var(--ds-space-xl);
}