/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */
:root {
	/* Colors - Dark Theme (Matrix Green) */
	--bg-primary: #0a0a0a;
	--bg-secondary: #1a1a1a;
	--text-primary: #00ff00;
	--text-secondary: #00cc00;
	--text-muted: #666666;
	--accent: #00ffff;
	--border: #333333;
	--glow: rgba(0, 255, 0, 0.5);

	/* Typography */
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;

	/* Spacing Scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* Layout */
	--max-width: 900px;
	--header-height: 60px;

	/* Animation */
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 500ms ease;
}

/* ============================================
   LIGHT THEME
   ============================================ */
.light-theme {
	--bg-primary: #fafafa;
	--bg-secondary: #f0f0f0;
	--text-primary: #1a1a1a;
	--text-secondary: #333333;
	--text-muted: #999999;
	--accent: #0066cc;
	--border: #dddddd;
	--glow: rgba(0, 102, 204, 0.3);
}

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-mono);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-size: 1.6rem;
	line-height: 1.6;
	transition: background-color var(--transition-base), color var(--transition-base);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ============================================
   HEADER
   ============================================ */
.terminal-header {
	position: sticky;
	top: 0;
	height: var(--header-height);
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding: 0 var(--space-md);
	z-index: 1000;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
}

.ascii-logo {
	font-family: var(--font-mono);
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.2em;
}

.header-buttons {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
}

.theme-toggle,
.cmd-palette-trigger {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-primary);
	padding: var(--space-xs) var(--space-sm);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 1.4rem;
	border-radius: 4px;
	transition: all var(--transition-fast);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.theme-toggle:hover,
.cmd-palette-trigger:hover {
	border-color: var(--accent);
	color: var(--accent);
	text-shadow: 0 0 10px var(--glow);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
.terminal-main {
	flex: 1;
	max-width: var(--max-width);
	margin: 0 auto;
	width: 100%;
	padding: var(--space-lg) var(--space-md);
}

section {
	margin-bottom: var(--space-xl);
	padding: var(--space-md);
	border: 1px solid var(--border);
	background: var(--bg-secondary);
	border-radius: 4px;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--space-sm);
}

.prompt {
	color: var(--accent);
	font-weight: 700;
	font-size: 1.6rem;
	align-self: start;
	margin-top: 0.2em;
}

/* ============================================
   COMMAND & OUTPUT STYLING
   ============================================ */
.command {
	grid-column: 2;
	color: var(--text-secondary);
	font-size: 1.6rem;
	font-weight: 500;
	margin: 0;
	font-family: var(--font-mono);
}

.output {
	grid-column: 2;
	padding-left: var(--space-md);
	border-left: 2px solid var(--border);
	width: 100%;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
	padding: var(--space-xl) var(--space-md);
	text-align: left;
}

.hero h2 {
	font-size: clamp(2.8rem, 5vw, 4rem);
	color: var(--text-primary);
	margin: var(--space-md) 0 var(--space-sm) 0;
	font-weight: 700;
}

.hero .subtitle {
	color: var(--text-secondary);
	font-size: 1.8rem;
	margin: var(--space-sm) 0;
}

.hero .location {
	color: var(--text-muted);
	font-size: 1.4rem;
	margin: var(--space-sm) 0 var(--space-md) 0;
}

.cta-buttons {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	font-family: var(--font-mono);
	cursor: pointer;
	transition: all var(--transition-fast);
	border-radius: 4px;
	font-size: 1.4rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-primary:hover,
.btn-secondary:hover {
	background: var(--accent);
	color: var(--bg-primary);
	box-shadow: 0 0 20px var(--glow);
	transform: translateY(-2px);
}

/* ============================================
   CURSOR & ANIMATIONS
   ============================================ */
.cursor {
	animation: blink 1s infinite;
	color: var(--text-primary);
	display: inline-block;
}

@keyframes blink {
	0%,
	49% {
		opacity: 1;
	}
	50%,
	100% {
		opacity: 0;
	}
}

.typewriter {
	overflow: hidden;
	border-right: 2px solid var(--text-primary);
	white-space: nowrap;
	animation: typing 2s steps(40) 1s forwards, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes blink-caret {
	from,
	to {
		border-color: transparent;
	}
	50% {
		border-color: var(--text-primary);
	}
}

/* ============================================
   CODE BLOCKS & SYNTAX HIGHLIGHTING
   ============================================ */
.code-block {
	background: var(--bg-primary);
	padding: var(--space-md);
	border-radius: 4px;
	overflow-x: auto;
	border: 1px solid var(--border);
	margin: var(--space-md) 0;
	font-size: 1.4rem;
	line-height: 1.6;
}

.code-block code {
	color: var(--text-secondary);
	display: block;
	white-space: pre;
}

.code-block .key {
	color: var(--accent);
	font-weight: 500;
}

.code-block .string {
	color: var(--text-secondary);
}

/* ============================================
   TREE VIEW (PROJECTS)
   ============================================ */
.tree-view {
	font-size: 1.4rem;
	line-height: 1.8;
	margin-top: var(--space-md);
}

.tree-root {
	color: var(--text-secondary);
	font-weight: 500;
	margin-bottom: var(--space-sm);
}

.tree-branch {
	color: var(--text-muted);
	margin-right: var(--space-xs);
	display: inline-block;
	width: 2em;
}

.tree-item {
	display: flex;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
	align-items: flex-start;
}

.project-card {
	flex: 1;
	margin-left: var(--space-xs);
	padding: var(--space-sm);
	background: var(--bg-primary);
	border-left: 2px solid var(--accent);
	border-radius: 4px;
}

.project-card h3 {
	color: var(--text-primary);
	font-size: 1.5rem;
	margin-bottom: var(--space-xs);
	font-weight: 500;
}

.project-card p {
	color: var(--text-muted);
	font-size: 1.4rem;
	margin-bottom: var(--space-xs);
}

.project-card .link {
	color: var(--accent);
	text-decoration: none;
	transition: all var(--transition-fast);
	font-size: 1.4rem;
}

.project-card .link:hover {
	text-shadow: 0 0 10px var(--glow);
	transform: translateX(5px);
	display: inline-block;
}

/* ============================================
   EDUCATION & EXPERIENCE
   ============================================ */
.edu-item,
.exp-item {
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border);

}

.edu-item:last-child,
.exp-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.edu-item h3,
.exp-item h3 {
	color: var(--text-primary);
	font-size: 1.6rem;
	margin: var(--space-sm) 0;
	font-weight: 500;
}

.edu-item p,
.exp-item p {
	color: var(--text-muted);
	font-size: 1.4rem;
	margin: var(--space-xs) 0;
}

.exp-meta {
	display: flex;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	font-size: 1.3rem;
}

.file-type {
	color: var(--text-muted);
}

.date {
	color: var(--accent);
}

.timestamp {
	color: var(--accent);
	font-weight: 500;
	display: inline-block;
	margin-right: var(--space-sm);
}

.meta {
	font-size: 1.3rem;
	color: var(--text-secondary);
	font-weight: 500;
}

.description {
	color: var(--text-secondary);
	margin-top: var(--space-sm);
	font-size: 1.4rem;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.contact-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm);
	border: 1px solid var(--border);
	border-radius: 4px;
	text-decoration: none;
	color: var(--text-primary);
	font-size: 1.3rem;
	transition: all var(--transition-fast);
	text-align: center;
}

.contact-link .icon {
	font-size: 2rem;
}

.contact-link:hover {
	border-color: var(--accent);
	background: var(--bg-primary);
	transform: translateY(-4px);
	box-shadow: 0 0 15px var(--glow);
}

/* ============================================
   FOOTER
   ============================================ */
.terminal-footer {
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	border-top: 1px solid var(--border);
	background: var(--bg-secondary);
	font-size: 1.4rem;
	color: var(--text-muted);
	margin-top: auto;
}

.footer-info {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	flex-wrap: wrap;
}

.version,
.separator,
.last-login {
	color: var(--text-muted);
	font-size: 1.3rem;
}

#timestamp {
	color: var(--text-secondary);
	font-weight: 500;
}

.copyright {
	font-size: 1.3rem;
	color: var(--text-muted);
	margin: var(--space-sm) 0;
}

.help-hint {
	font-size: 1.2rem;
	color: var(--text-muted);
}

/* ============================================
   MODALS
   ============================================ */
.cmd-palette-modal,
.help-modal,
.vim-trap-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20vh;
	z-index: 9999;
}

.cmd-palette-modal[hidden],
.help-modal[hidden],
.vim-trap-modal[hidden] {
	display: none;
}

.cmd-palette-content,
.help-content,
.vim-trap-content {
	background: var(--bg-secondary);
	border: 1px solid var(--accent);
	border-radius: 8px;
	width: 90%;
	max-width: 600px;
	box-shadow: 0 0 40px var(--glow);
	max-height: 80vh;
	overflow-y: auto;
}

.cmd-input {
	width: 100%;
	padding: var(--space-md);
	background: var(--bg-primary);
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--text-primary);
	font-family: var(--font-mono);
	font-size: 1.6rem;
	border-radius: 8px 8px 0 0;
}

.cmd-input:focus {
	outline: none;
	border-bottom-color: var(--accent);
}

.cmd-results {
	list-style: none;
	padding: var(--space-sm);
}

.cmd-result-item {
	padding: var(--space-sm) var(--space-md);
	color: var(--text-primary);
	cursor: pointer;
	border-bottom: 1px solid var(--border);
	font-size: 1.4rem;
	transition: all var(--transition-fast);
}

.cmd-result-item:last-child {
	border-bottom: none;
}

.cmd-result-item:hover {
	background: var(--bg-primary);
	color: var(--accent);
	padding-left: calc(var(--space-md) + 0.5rem);
}

.help-content {
	padding: var(--space-md);
	border-radius: 8px;
}

.help-content h2 {
	color: var(--text-primary);
	margin-bottom: var(--space-md);
	font-size: 1.8rem;
}

.shortcuts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.shortcut-item {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: var(--space-sm);
	border: 1px solid var(--border);
	border-radius: 4px;
}

.shortcut-item kbd {
	background: var(--bg-primary);
	border: 1px solid var(--accent);
	padding: var(--space-xs) var(--space-sm);
	border-radius: 3px;
	color: var(--accent);
	white-space: nowrap;
}

.shortcut-item span {
	color: var(--text-muted);
	font-size: 1.3rem;
}

.help-content .hint {
	color: var(--text-muted);
	font-size: 1.3rem;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border);
}

.vim-trap-content {
	padding: var(--space-md);
	text-align: center;
	border-radius: 8px;
}

.vim-trap-content p {
	color: var(--text-primary);
	font-size: 1.6rem;
	margin-bottom: var(--space-sm);
}

.vim-trap-content kbd {
	background: var(--bg-primary);
	border: 1px solid var(--accent);
	padding: var(--space-xs) var(--space-sm);
	border-radius: 3px;
	color: var(--accent);
	margin: 0 var(--space-xs);
}

/* ============================================
   KBD ELEMENT
   ============================================ */
kbd {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-mono);
	font-size: 1.2rem;
	color: var(--text-secondary);
}

/* ============================================
   LINKS
   ============================================ */
a {
	color: var(--accent);
	text-decoration: none;
	transition: all var(--transition-fast);
}

a:hover {
	text-shadow: 0 0 10px var(--glow);
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

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

::-webkit-scrollbar-thumb {
	background: var(--accent);
	border-radius: 4px;
}

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

/* ============================================
   SELECTION
   ============================================ */
::selection {
	background: var(--accent);
	color: var(--bg-primary);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: var(--bg-secondary);
	border: 1px solid var(--accent);
	color: var(--text-primary);
	padding: var(--space-sm) var(--space-md);
	border-radius: 4px;
	font-size: 1.4rem;
	box-shadow: 0 0 20px var(--glow);
	transition: transform var(--transition-base);
	z-index: 99999;
}

.toast.show {
	transform: translateX(-50%) translateY(0);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
	:root {
		--space-lg: 2rem;
		--space-xl: 3rem;
	}

	.terminal-main {
		padding: var(--space-md) var(--space-sm);
	}

	section {
		padding: var(--space-sm);
		grid-template-columns: 1fr;
		gap: var(--space-xs);
	}

	.prompt {
		position: absolute;
		left: var(--space-sm);
		top: var(--space-sm);
	}

	.command {
		grid-column: 1;
		margin-left: 2rem;
		margin-top: 0;
	}

	.output {
		grid-column: 1;
		border-left: none;
		padding-left: 0;
		margin-left: 2rem;
	}

	.hero h2 {
		font-size: 2.2rem;
	}

	.hero .subtitle {
		font-size: 1.4rem;
	}

	.cta-buttons {
		flex-direction: column;
	}

	.btn-primary,
	.btn-secondary {
		width: 100%;
	}

	.contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.shortcuts-grid {
		grid-template-columns: 1fr;
	}

	.cmd-palette-content,
	.help-content,
	.vim-trap-content {
		width: 95%;
		max-width: none;
		padding: var(--space-md);
	}

	.cmd-input {
		font-size: 1.4rem;
	}

	.footer-info {
		gap: var(--space-xs);
	}

	.version,
	.separator,
	.last-login {
		font-size: 1.2rem;
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
	.terminal-header,
	.cta-buttons,
	.cmd-palette-modal,
	.help-modal,
	.vim-trap-modal {
		display: none;
	}

	.terminal-main {
		max-width: 100%;
	}

	section {
		page-break-inside: avoid;
		border: none;
		background: transparent;
		padding: 0;
		margin-bottom: var(--space-lg);
	}
}