my-app/src/components/ui/Card.module.css

@@ -2,26 +2,23 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1.2rem;
-	/*background: var(--bg-secondary);*/
-	background: #151516;
-	border: 1px solid #2f2e2d;
-	/*border-radius: 8px;*/
+	background: var(--bg-primary);
+	border: 1px solid #E3E3E3;
 	overflow: hidden;
 	cursor: pointer;
 	transition: all 0.2s ease;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	box-shadow: 0 2px 8px rgba(104, 104, 104, 0.15);
 	text-decoration: none;
-	color: inherit;
+	color: var(--text-primary);
 	aspect-ratio: 1 / 1;
 	padding: 1rem;
 }
 
 @media (hover: hover) {
 	.card:hover {
-		border-color: #4a4a4a;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
-		background-color: rgb(23, 23, 25);
-		transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+		border-color: #D5D5D6;
+		box-shadow: 0 4px 16px rgba(104, 104, 104, 0.25);
+		transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
 	}
 
 	.card:hover .image {
@@ -31,12 +28,15 @@
 	.card:hover .imageContainer::after {
 		opacity: 1;
 	}
+
+	.actionButton:hover {
+		background: #F5F5F5;
+		border-color: #D7D7D7;
+	}
 }
 
 .card:active {
-	border-color: #4a4a4a;
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
-	background-color: rgb(23, 23, 25);
+	background-color: #FBFBFB;
 }
 
 .card:active .image {
@@ -47,7 +47,7 @@
 	opacity: 1;
 }
 
-.card:focus {
+.card:focus-visible {
 	outline: 2px solid var(--color-primary);
 	outline-offset: 2px;
 }
@@ -98,7 +98,7 @@
 	margin: 0;
 	font-size: 20px;
 	font-weight: 400;
-	color: white;
+	color: #262626;
 	line-height: 1.3;
 }
 
@@ -106,15 +106,15 @@
 	margin: 0 0 16px 0;
 	font-size: 14px;
 	font-weight: 400;
-	color: #b0b0b0;
+	color: #5F5F5F;
 	line-height: 1.4;
 }
 
 .actionButton {
 	background: transparent;
-	border: 1px solid #504f4c;
+	border: 1px solid #E0E0E0;
 	/*border-radius: 4px;*/
-	color: white;
+	color: #111111;
 	padding: 12px 16px;
 	font-size: 14px;
 	font-weight: 400;
@@ -126,12 +126,49 @@
 	height: fit-content;
 }
 
-.actionButton:hover {
-	background: rgba(255, 255, 255, 0.1);
-	border-color: rgba(255, 255, 255, 0.8);
+.actionButton:focus {
+	background-color: #E8E8E8;
 }
 
-.actionButton:focus {
-	outline: 1px solid white;
+.actionButton:focus-visible {
+	outline: 2px solid var(--color-primary);
 	outline-offset: 2px;
+	background-color: inherit;
+}
+
+
+/* DARK MODE STYLES */
+[data-theme="dark"] {
+	.card {
+		background: #151516;
+		border: 1px solid #2f2e2d;
+	}
+
+	.header {
+		color: #F1F1F1;
+	}
+
+	.subheader {
+		color: #A7A7A7;
+	}
+
+	.actionButton {
+		color: #F1F1F1;
+		border-color: #444341;
+	}
+
+
+	@media (hover: hover) {
+		.card:hover {
+			border-color: #4a4a4a;
+			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+			background-color: rgb(23, 23, 25);
+			transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+		}
+
+		.actionButton:hover {
+			background: #202022;
+			border-color: #696763;
+		}
+	}
 }