:root {
	/* --- CATPPUCCIN MOCHA PALETTE --- */
	--ctp-rosewater: #f5e6d3;
	--ctp-flamingo: #f2ccd0;
	--ctp-pink: #f685e6;
	--ctp-mauve: #cba6f7;
	--ctp-red: #f38ba8;
	--ctp-maroon: #eba0ac;
	--ctp-peach: #fab387;
	--ctp-yellow: #f9e2af;
	--ctp-green: #a6e3a1;
	--ctp-teal: #94e2d5;
	--ctp-sky: #89dceb;
	--ctp-sapphire: #74c7ec;
	--ctp-blue: #89b4fa;
	--ctp-lavender: #b4befe;
	--ctp-text: #cdd6f4;
	--ctp-subtext1: #bac2de;
	--ctp-subtext0: #a6adc8;
	--ctp-overlay2: #9399b2;
	--ctp-overlay1: #7f849c;
	--ctp-overlay0: #6c7086;
	--ctp-surface2: #585b70;
	--ctp-surface1: #45475a;
	--ctp-surface0: #313244;
	--ctp-base: #1e1e2e;
	--ctp-mantle: #181825;
	--ctp-crust: #11111b;

	/* --- MAPPING TO YOUR DESIGN SYSTEM --- */

	/* Semantic Colors */
	--color-background: var(--ctp-base);
	--color-surface: var(--ctp-surface0);
	--color-text: var(--ctp-text);
	--color-text-secondary: var(--ctp-subtext0);

	/* Primary Action Colors */
	--color-primary: var(--ctp-blue);
	--color-primary-hover: var(--ctp-sapphire);
	--color-primary-active: var(--ctp-sky);
	--color-btn-primary-text: var(--ctp-base);

	/* Secondary/Border Colors */
	--color-secondary: var(--ctp-surface1);
	--color-secondary-hover: var(--ctp-surface2);
	--color-border: var(--ctp-surface1);
	--color-card-border: var(--ctp-surface1);
	--color-card-border-inner: var(--ctp-surface2);

	/* Status Colors */
	--color-error: var(--ctp-red);
	--color-success: var(--ctp-green);
	--color-warning: var(--ctp-yellow);
	--color-info: var(--ctp-sky);

	/* Typography & Layout defaults */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
	--font-size-base: 16px;
	--line-height-normal: 1.6;

	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-24: 1.5rem;
	--space-32: 2rem;

	--radius-base: 8px;
	--radius-lg: 12px;
}

/* --- BASE STYLES --- */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-family-base);
	line-height: var(--line-height-normal);
	margin: 0;
	padding: 0;
}

/* Container */
.container {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--space-32);
}

/* Navigation - Glassmorphism Effect */
nav {
	/* Layout */
	display: flex;
	gap: var(--space-16);
	padding: var(--space-16);
	margin-bottom: var(--space-32);
	
	/* Stickiness */
	position: sticky;
	top: var(--space-16);
	z-index: 100;

	/* Visuals */
	background-color: rgba(30, 30, 46, 0.85); /* 85% opacity base color */
	backdrop-filter: blur(12px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

nav a {
	color: var(--ctp-blue);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s;
}

nav a:hover {
	color: var(--ctp-sky);
}

/* Headings */
h1, h2, h3 {
	color: var(--ctp-mauve);
	margin-top: 0;
}

h1 {
	font-size: 2.5rem;
	margin-bottom: var(--space-24);
	padding-bottom: var(--space-12);
	border-bottom: 2px solid var(--ctp-surface1);

	/* Gradient Text */
	background: linear-gradient(to right, var(--ctp-mauve), var(--ctp-blue));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

h2 {
	color: var(--ctp-lavender);
	margin-bottom: var(--space-16);
}

h3 {
	color: var(--ctp-sapphire);
	margin-bottom: 0;
}

/* Links */
a {
	color: var(--ctp-blue);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* Cards (Projects) */
.card {
	display: block; 
	background-color: var(--color-surface);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-24);
	margin-bottom: var(--space-16);
	transition: transform 0.2s, border-color 0.2s;
	text-decoration: none;
}

.card:hover {
	transform: translateY(-2px);
	border-color: var(--ctp-mauve);
	text-decoration: none;
}

/* Flex header for card title and arrow */
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-8);
}

.card .arrow {
	color: var(--ctp-overlay1);
	font-weight: bold;
	transition: transform 0.2s, color 0.2s;
}

.card:hover .arrow {
	color: var(--ctp-mauve);
	transform: translate(2px, -2px);
}

.card p {
	color: var(--ctp-subtext0);
	margin-bottom: 0;
}

/* Social Links List */
.social-links {
	list-style: none;
	padding: 0;
	display: flex;
	gap: var(--space-16);
}

.social-links li {
	margin: 0;
}

/* Social SVGs */
.social-links svg {
	fill: var(--ctp-subtext0);
	transition: fill 0.2s, transform 0.2s;
}

.social-links a:hover svg {
	fill: var(--ctp-blue);
	transform: scale(1.1);
}

/* Footer */
footer {
	text-align: center;
	margin-top: var(--space-32);
	padding: var(--space-24);
	color: var(--ctp-overlay1);
	font-size: 0.9rem;
	border-top: 1px solid var(--ctp-surface0);
}

/* Lists (General) */
ul {
	list-style-position: inside;
	padding-left: 0;
}

li {
	margin-bottom: var(--space-8);
}

/* --- BLOG & CONTENT STYLES --- */

/* CODE BLOCK STYLING 
   Updated to use 'crust' for darker background and specific syntax tokens.
*/

/* The container generated by Jekyll */
.highlight {
	margin-bottom: var(--space-24);
	border-radius: var(--radius-base);
	overflow: hidden; /* Ensures rounded corners clip the background */
}

pre {
	/* Use 'Crust' (#11111b) which is darker than 'Base' (#1e1e2e) */
	background-color: var(--ctp-crust); 
	border: 1px solid var(--ctp-surface0);
	border-radius: var(--radius-base);
	padding: var(--space-16);
	overflow-x: auto;
	font-family: var(--font-family-mono);
	font-size: 0.9rem;
	color: var(--ctp-text);
	margin: 0; /* Reset default margins */
}

/* Inline code styling */
code {
	font-family: var(--font-family-mono);
	background-color: var(--ctp-surface0);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--ctp-peach);
	font-size: 0.9em;
}

/* Remove background for code inside pre blocks */
pre code {
	background-color: transparent;
	padding: 0;
	color: inherit;
	border-radius: 0;
}

/* --- SYNTAX HIGHLIGHTING (Rouge/Jekyll) --- */
/* Comments */
.highlight .c, .highlight .cm, .highlight .cp, .highlight .c1, .highlight .cs { 
	color: var(--ctp-overlay1); 
	font-style: italic; 
}
/* Keywords (int, return, void, if) */
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv { 
	color: var(--ctp-mauve); 
}
/* Names/Variables */
.highlight .n, .highlight .nb, .highlight .bp { 
	color: var(--ctp-text); 
}
/* Functions */
.highlight .nf, .highlight .fm { 
	color: var(--ctp-blue); 
}
/* Strings */
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss { 
	color: var(--ctp-green); 
}
/* Numbers */
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { 
	color: var(--ctp-peach); 
}
/* Operators (=, +, -, *) */
.highlight .o, .highlight .ow { 
	color: var(--ctp-sky); 
}
/* Macros/Preprocessors */
.highlight .cp {
	color: var(--ctp-teal);
}

article {
	line-height: 1.8;
	font-size: 1.05rem;
}

article h2 {
	margin-top: var(--space-32);
	color: var(--ctp-blue);
}

article ul, article ol {
	margin-bottom: var(--space-24);
	padding-left: var(--space-24);
}

.btn-back {
	display: inline-block;
	margin-bottom: var(--space-24);
	color: var(--ctp-subtext0);
	font-weight: 600;
}
.btn-back:hover {
	color: var(--ctp-mauve);
	text-decoration: none;
}

/* --- BUTTONS --- */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--ctp-blue);
	color: var(--ctp-base);
	padding: 10px 20px;
	border-radius: var(--radius-base);
	font-weight: 700;
	transition: background-color 0.2s, transform 0.2s;
	text-decoration: none; /* Ensure no underline */
}

.btn-primary:hover {
	background-color: var(--ctp-sapphire);
	text-decoration: none;
	transform: translateY(-2px);
}

/* --- PROFILE & ABOUT SECTION --- */
.about-header {
	display: flex;
	align-items: center;
	gap: var(--space-32);
	margin-bottom: var(--space-32);
}

.profile-img {
	width: 160px;
	height: 160px;
	border-radius: 50%; /* Makes it a circle */
	object-fit: cover;  /* Ensures image doesn't stretch */
	border: 3px solid var(--ctp-blue);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	flex-shrink: 0;
}

/* Mobile Responsive: Stack image and text */
@media (max-width: 600px) {
	.about-header {
		flex-direction: column;
		text-align: center;
	}
	
	.profile-img {
		width: 130px;
		height: 130px;
		margin-bottom: var(--space-16);
	}
}