/* 全局样式文件 */

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	/* Default Dark Theme - Sailor Piece Style (Ocean Blue/Gold/Purple) */
	--bg-primary: #0f172a; /* Slate 900 - Deep Ocean */
	--bg-secondary: #1e293b; /* Slate 800 - Deep Water */
	--bg-tertiary: #334155; /* Slate 700 - Shallow Water */
	--text-primary: #f8fafc; /* Slate 50 */
	--text-secondary: #cbd5e1; /* Slate 300 */
	
    /* Sailor Piece Brand Colors */
	--accent: #0ea5e9; /* Sky 500 - Ocean Blue */
	--accent-rgb: 14, 165, 233;
	--accent-hover: #38bdf8; /* Sky 400 */
    
    --gold: #fbbf24; /* Amber 400 - Treasure Gold */
    --gold-hover: #f59e0b; /* Amber 500 */
    
    --purple: #a855f7; /* Purple 500 - Devil Fruit/Mystery */
    
	--border: #334155; /* Slate 700 */
	--link: #38bdf8; /* Sky 400 */
	--link-hover: #7dd3fc; /* Sky 300 */
	--text-muted: #94a3b8; /* Slate 400 */

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 4rem;
	
	/* Layout */
	--header-height: 60px;
	--sidebar-width: 280px;
	--content-max-width: 1280px;
}

[data-theme="light"] {
	/* Light Theme Variables */
	--bg-primary: #ffffff;
	--bg-secondary: #f0f9ff; /* Sky 50 */
	--bg-tertiary: #e0f2fe; /* Sky 100 */
	--text-primary: #0f172a; /* Slate 900 */
	--text-secondary: #334155; /* Slate 700 */
	--accent: #0284c7; /* Sky 600 */
	--accent-rgb: 2, 132, 199;
	--accent-hover: #0369a1; /* Sky 700 */
	--border: #bae6fd; /* Sky 200 */
	--link: #0284c7; /* Sky 600 */
	--link-hover: #0369a1; /* Sky 700 */
	--text-muted: #64748b; /* Slate 500 */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    line-height: 1.6;
}

/* Markdown Content Styles */
.page-content {
	max-width: var(--content-max-width);
}

.page-content h1 {
	font-size: 2.25rem;
	color: var(--text-primary);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid var(--accent);
    background: linear-gradient(to right, var(--accent), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.page-content h2 {
	font-size: 1.75rem;
	color: var(--text-primary);
	margin: var(--spacing-xl) 0 var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-content h3 {
	font-size: 1.4rem;
	color: var(--text-primary);
	margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.page-content p {
	color: var(--text-secondary);
	line-height: 1.8;
	margin-bottom: var(--spacing-md);
}

.page-content a,
.page-content a:visited {
	color: var(--link);
    text-decoration: none;
    transition: color 0.2s;
}

.page-content a:hover {
	color: var(--link-hover);
    text-decoration: underline;
}

/* Global Link Styles */
a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover);
}

/* Toast Notification Styles */
.toast-container {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.toast-message {
	background: rgba(15, 23, 42, 0.95);
	color: #fff;
	padding: 12px 24px;
	border-radius: 12px;
	font-size: 0.95rem;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	border: 1px solid var(--accent);
	box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
}

.toast-message.show {
	opacity: 1;
	transform: translateY(0);
}

/* Disabled Link Style */
.wiki-link-disabled {
	color: var(--text-muted) !important;
	cursor: not-allowed;
	transition: all 0.2s;
	text-decoration: none !important;
    opacity: 0.7;
}

.wiki-link-disabled:hover {
	color: var(--text-secondary) !important;
    opacity: 1;
}

/* Animations */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-down { animation: fadeDown 0.8s ease-out forwards; }
.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; opacity: 0; }
.animate-slide-up { animation: fadeUp 0.8s ease-out forwards; opacity: 0; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Code Block Copy Button Styles */
pre {
    position: relative;
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border);
}

.copy-code-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
}

pre:hover .copy-code-btn {
    opacity: 1;
}

.copy-code-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}