/* Dark Mode Stylesheet using shadcn color tokens */

/* Shadcn Dark Mode Color Tokens */
:root[data-theme="dark"] {
	/* Background colors */
	--background: 0 0% 0%;
	--foreground: 0 0% 98%;
	
	/* Card colors */
	--card: 0 0% 3.9%;
	--card-foreground: 0 0% 98%;
	
	/* Popover colors */
	--popover: 0 0% 3.9%;
	--popover-foreground: 0 0% 98%;
	
	/* Primary colors */
	--primary: 0 0% 98%;
	--primary-foreground: 0 0% 9%;
	
	/* Secondary colors */
	--secondary: 0 0% 14.9%;
	--secondary-foreground: 0 0% 98%;
	
	/* Muted colors */
	--muted: 0 0% 14.9%;
	--muted-foreground: 0 0% 75%;
	
	/* Accent colors */
	--accent: 0 0% 14.9%;
	--accent-foreground: 0 0% 98%;
	
	/* Destructive colors */
	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 0 0% 98%;
	
	/* Border colors */
	--border: 0 0% 14.9%;
	--input: 0 0% 14.9%;
	--ring: 0 0% 83.1%;
	
	/* Radius */
	--radius: 0.5rem;
}

/* Light Mode Color Tokens */
:root[data-theme="light"],
:root:not([data-theme]) {
	/* Background colors */
	--background: 0 0% 100%;
	--foreground: 0 0% 3.9%;
	
	/* Card colors */
	--card: 0 0% 100%;
	--card-foreground: 0 0% 3.9%;
	
	/* Popover colors */
	--popover: 0 0% 100%;
	--popover-foreground: 0 0% 3.9%;
	
	/* Primary colors */
	--primary: 0 0% 9%;
	--primary-foreground: 0 0% 98%;
	
	/* Secondary colors */
	--secondary: 0 0% 96.1%;
	--secondary-foreground: 0 0% 9%;
	
	/* Muted colors */
	--muted: 0 0% 96.1%;
	--muted-foreground: 0 0% 45.1%;
	
	/* Accent colors */
	--accent: 0 0% 96.1%;
	--accent-foreground: 0 0% 9%;
	
	/* Destructive colors */
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 98%;
	
	/* Border colors */
	--border: 0 0% 89.8%;
	--input: 0 0% 89.8%;
	--ring: 0 0% 3.9%;
	
	/* Radius */
	--radius: 0.5rem;
}

/* Apply dark mode styles */
[data-theme="dark"] body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

[data-theme="dark"] .profile-name {
	color: hsl(var(--foreground));
}

[data-theme="dark"] .tagline {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .header-link {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .header-link:hover {
	color: hsl(var(--foreground));
}

[data-theme="dark"] .header-link-active {
	color: hsl(var(--foreground));
	border-bottom-color: hsl(var(--foreground));
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] .project-title,
[data-theme="dark"] .project-title-latest {
	color: hsl(var(--foreground));
}

[data-theme="dark"] .project-description {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] p {
	color: hsl(var(--foreground));
}

[data-theme="dark"] li {
	color: hsl(var(--foreground));
}

[data-theme="dark"] h3 {
	color: hsl(var(--foreground));
}

[data-theme="dark"] a {
	color: hsl(var(--foreground));
	text-decoration: underline;
	text-decoration-color: hsl(var(--muted-foreground));
}

[data-theme="dark"] a:hover {
	color: hsl(var(--foreground));
	text-decoration-color: hsl(var(--foreground));
}

[data-theme="dark"] .image-caption {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .quote {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] code {
	background-color: hsl(var(--card));
	color: hsl(var(--foreground));
}

[data-theme="dark"] .img-placeholder {
	background-color: hsl(var(--card));
	border: 1px solid hsl(var(--border));
}

[data-theme="dark"] hr {
	border-color: hsl(var(--border));
}

[data-theme="dark"] .work-heading-other {
	color: #D4B800;
}

[data-theme="dark"] .work-heading-recent {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .work-heading-latest {
	color: #FFD60A;
}

[data-theme="dark"] .project-detail {
	color: hsl(var(--foreground));
}

[data-theme="dark"] .footer-item {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .footer-item-copyright {
	color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .experience-image-placeholder {
	background-color: hsl(var(--card));
	border-color: hsl(var(--border));
}

[data-theme="dark"] .experience-image-img {
	border-color: hsl(var(--background));
}

/* Light mode styles */
[data-theme="light"] body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

[data-theme="light"] .profile-name {
	color: hsl(var(--foreground));
}

[data-theme="light"] .tagline {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] .header-link {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] .header-link:hover {
	color: hsl(var(--foreground));
}

[data-theme="light"] .header-link-active {
	color: hsl(var(--foreground));
	border-bottom-color: hsl(var(--foreground));
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] .project-title,
[data-theme="light"] .project-title-latest {
	color: hsl(var(--foreground));
}

[data-theme="light"] .project-description {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] p {
	color: hsl(var(--foreground));
}

[data-theme="light"] .work-heading-other {
	color: #D4B800;
}

[data-theme="light"] .work-heading-recent {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] .work-heading-latest {
	color: hsl(var(--primary));
}

[data-theme="light"] .project-detail {
	color: hsl(var(--foreground));
}

[data-theme="light"] .footer-item {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] .footer-item-copyright {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] hr {
	border-color: hsl(var(--border));
}

[data-theme="light"] .experience-image-placeholder {
	background-color: hsl(var(--card));
	border-color: hsl(var(--border));
}

[data-theme="light"] .experience-image-img {
	border-color: hsl(var(--background));
}

[data-theme="light"] .theme-toggle-button {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] .theme-toggle-button:hover {
	color: hsl(var(--foreground));
	background-color: hsl(var(--accent));
}

[data-theme="light"] li {
	color: hsl(var(--foreground));
}

[data-theme="light"] h3 {
	color: hsl(var(--foreground));
}

[data-theme="light"] a {
	color: hsl(var(--foreground));
	text-decoration: underline;
}

[data-theme="light"] .image-caption {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] .quote {
	color: hsl(var(--muted-foreground));
}

[data-theme="light"] code {
	background-color: hsl(var(--muted));
	color: hsl(var(--foreground));
}