Rebuild homepage with a light editorial theme in place of dark glass UI

app/components/Button.tsx

@@ -70,69 +70,53 @@ export const Button = ({
 
 // Styled Components //
 
-const StyledButton = styled.button<{
+// Shared visual rules for all three DOM variants (button/Link/anchor) —
+// kept as one template so the three renderers below can't drift apart.
+const sharedButtonCss = (props: {
 	$variant: "primary" | "secondary" | "tertiary"
 	$size: "small" | "default"
-}>`
-	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
-	border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
-	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
+}) => `
+	padding: ${props.$size === "small" ? "0.5rem 1.1rem" : "0.85rem 1.75rem"};
+	border-radius: 999px;
+	font-weight: ${props.$size === "small" ? "600" : "700"};
+	font-size: ${props.$size === "small" ? "0.9rem" : "1.05rem"};
 	cursor: pointer;
-	transition: all 0.3s ease;
+	transition: all 0.2s ease;
 	text-decoration: none;
 	display: inline-flex;
 	align-items: center;
+	justify-content: center;
 	gap: 0.5rem;
-	border: none;
 	font-family: inherit;
 	line-height: 1.5;
-	background-color: ${(props) =>
+	white-space: nowrap;
+	background-color: ${
 		props.$variant === "primary"
-			? "white"
-			: props.$variant === "tertiary"
+			? "var(--color-accent)"
+			: props.$variant === "secondary"
 				? "transparent"
-				: "transparent"};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
-	border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
-	position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
-	overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
-
-	${(props) =>
-		props.$variant === "tertiary" &&
-		`
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: -100%;
-			width: 100%;
-			height: 100%;
-			background: linear-gradient(
-				90deg,
-				transparent,
-				rgba(255, 255, 255, 0.1),
-				transparent
-			);
-			transition: left 0.5s ease;
-		}
-	`}
+				: "transparent"
+	};
+	color: ${
+		props.$variant === "primary"
+			? "var(--color-accent-ink)"
+			: props.$variant === "secondary"
+				? "var(--color-ink)"
+				: "var(--color-ink-muted)"
+	};
+	border: ${props.$variant === "secondary" ? "1.5px solid var(--color-ink)" : "1.5px solid transparent"};
+`
 
+const sharedButtonHoverCss = (props: { $variant: "primary" | "secondary" | "tertiary" }) => `
 	&:hover:not(:disabled) {
-		background-color: ${(props) => {
-			if (props.$variant === "primary") return "#ddd"
-			if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
-			return "rgba(255, 255, 255, 0.1)"
-		}};
-		border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-
-		${(props) =>
-			props.$variant === "tertiary" &&
-			`
-			&::before {
-				left: 100%;
-			}
-		`}
+		background-color: ${
+			props.$variant === "primary"
+				? "var(--color-accent-hover)"
+				: props.$variant === "secondary"
+					? "var(--color-ink)"
+					: "transparent"
+		};
+		color: ${props.$variant === "secondary" ? "var(--color-bg)" : props.$variant === "tertiary" ? "var(--color-ink)" : "var(--color-accent-ink)"};
 	}
 
 	&:disabled {
@@ -141,134 +125,26 @@ const StyledButton = styled.button<{
 	}
 `
 
-const StyledLink = styled(Link)<{
+const StyledButton = styled.button<{
 	$variant: "primary" | "secondary" | "tertiary"
 	$size: "small" | "default"
 }>`
-	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
-	border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
-	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
-	cursor: pointer;
-	transition: all 0.3s ease;
-	text-decoration: none;
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-	border: none;
-	font-family: inherit;
-	line-height: 1.5;
-	background-color: ${(props) =>
-		props.$variant === "primary"
-			? "white"
-			: props.$variant === "tertiary"
-				? "transparent"
-				: "transparent"};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
-	border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
-	position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
-	overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
-
-	${(props) =>
-		props.$variant === "tertiary" &&
-		`
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: -100%;
-			width: 100%;
-			height: 100%;
-			background: linear-gradient(
-				90deg,
-				transparent,
-				rgba(255, 255, 255, 0.1),
-				transparent
-			);
-			transition: left 0.5s ease;
-		}
-	`}
-
-	&:hover {
-		background-color: ${(props) => {
-			if (props.$variant === "primary") return "#ddd"
-			if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
-			return "rgba(255, 255, 255, 0.1)"
-		}};
-		border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
+	${sharedButtonCss}
+	${sharedButtonHoverCss}
+`
 
-		${(props) =>
-			props.$variant === "tertiary" &&
-			`
-			&::before {
-				left: 100%;
-			}
-		`}
-	}
+const StyledLink = styled(Link)<{
+	$variant: "primary" | "secondary" | "tertiary"
+	$size: "small" | "default"
+}>`
+	${sharedButtonCss}
+	${sharedButtonHoverCss}
 `
 
 const StyledExternalLink = styled.a<{
 	$variant: "primary" | "secondary" | "tertiary"
 	$size: "small" | "default"
 }>`
-	padding: ${(props) => (props.$size === "small" ? "0.5rem 1rem" : "0.75rem 1.5rem")};
-	border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-	font-weight: ${(props) => (props.$size === "small" ? "500" : "600")};
-	font-size: ${(props) => (props.$size === "small" ? "inherit" : "1.1rem")};
-	cursor: pointer;
-	transition: all 0.3s ease;
-	text-decoration: none;
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-	border: none;
-	font-family: inherit;
-	line-height: 1.5;
-	background-color: ${(props) =>
-		props.$variant === "primary"
-			? "white"
-			: props.$variant === "tertiary"
-				? "transparent"
-				: "transparent"};
-	color: ${(props) => (props.$variant === "primary" ? "black" : "white")};
-	border: ${(props) => (props.$variant === "secondary" ? "1px solid white" : "none")};
-	position: ${(props) => (props.$variant === "tertiary" ? "relative" : "static")};
-	overflow: ${(props) => (props.$variant === "tertiary" ? "hidden" : "visible")};
-
-	${(props) =>
-		props.$variant === "tertiary" &&
-		`
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: -100%;
-			width: 100%;
-			height: 100%;
-			background: linear-gradient(
-				90deg,
-				transparent,
-				rgba(255, 255, 255, 0.1),
-				transparent
-			);
-			transition: left 0.5s ease;
-		}
-	`}
-
-	&:hover {
-		background-color: ${(props) => {
-			if (props.$variant === "primary") return "#ddd"
-			if (props.$variant === "tertiary") return "rgba(255, 255, 255, 0.05)"
-			return "rgba(255, 255, 255, 0.1)"
-		}};
-		border-radius: ${(props) => (props.$variant === "tertiary" ? "0.375rem" : "0.25rem")};
-
-		${(props) =>
-			props.$variant === "tertiary" &&
-			`
-			&::before {
-				left: 100%;
-			}
-		`}
-	}
+	${sharedButtonCss}
+	${sharedButtonHoverCss}
 `

app/components/Card.tsx

@@ -78,13 +78,13 @@ export const CardContent = styled.div<{ $padding?: string }>`
 export const CardTitle = styled.h3<{ $size?: string }>`
 	font-size: ${(props) => props.$size || "1.25rem"};
 	font-weight: bold;
-	color: white;
+	color: var(--color-ink);
 	margin-bottom: 0.5rem;
 `
 
 export const CardText = styled.p<{ $color?: string; $size?: string; $weight?: string }>`
 	font-size: ${(props) => props.$size || "0.875rem"};
-	color: ${(props) => props.$color || "#9ca3af"};
+	color: ${(props) => props.$color || "var(--color-ink-muted)"};
 	margin-bottom: 0.5rem;
 	font-weight: ${(props) => props.$weight || "normal"};
 `
@@ -94,49 +94,55 @@ export const CardText = styled.p<{ $color?: string; $size?: string; $weight?: st
 const StyledLink = styled(Link)`
 	display: flex;
 	flex-direction: column;
-	background-color: rgba(21, 21, 28, 0.75);
-	backdrop-filter: blur(10px);
-	border-radius: 0.5rem;
+	background-color: var(--color-bg-raised);
+	border: 1px solid var(--color-border);
+	border-radius: 0.75rem;
 	overflow: hidden;
-	transition: transform 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
 	text-decoration: none;
 	color: inherit;
 
 	&:hover {
 		transform: translateY(-4px);
-		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 12px 24px rgba(23, 20, 15, 0.1);
 	}
 `
 
 const StyledExternalLink = styled.a`
 	display: flex;
 	flex-direction: column;
-	background-color: rgba(21, 21, 28, 0.75);
-	backdrop-filter: blur(10px);
-	border-radius: 0.5rem;
+	background-color: var(--color-bg-raised);
+	border: 1px solid var(--color-border);
+	border-radius: 0.75rem;
 	overflow: hidden;
-	transition: transform 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
 	text-decoration: none;
 	color: inherit;
 
 	&:hover {
 		transform: translateY(-4px);
-		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 12px 24px rgba(23, 20, 15, 0.1);
 	}
 `
 
 const StyledDiv = styled.div`
 	display: flex;
 	flex-direction: column;
-	background-color: rgba(21, 21, 28, 0.75);
-	backdrop-filter: blur(10px);
-	border-radius: 0.5rem;
+	background-color: var(--color-bg-raised);
+	border: 1px solid var(--color-border);
+	border-radius: 0.75rem;
 	overflow: hidden;
-	transition: transform 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
 
 	&:hover {
 		transform: translateY(-4px);
-		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 12px 24px rgba(23, 20, 15, 0.1);
 	}
 `
 
@@ -147,8 +153,8 @@ const ImageContainer = styled.div<{ $aspectRatio?: "16/9" | "1/1" | "auto" }>`
 	${(props) => props.$aspectRatio === "16/9" && "aspect-ratio: 16/9;"}
 	${(props) => props.$aspectRatio === "1/1" && "aspect-ratio: 1/1;"}
 	background-color: ${(props) =>
-		props.$aspectRatio !== "auto" ? "rgba(0, 0, 0, 0.8)" : "transparent"};
-	border-radius: ${(props) => (props.$aspectRatio !== "auto" ? "0.5rem" : "0")};
+		props.$aspectRatio !== "auto" ? "var(--color-border)" : "transparent"};
+	border-radius: 0;
 `
 
 const CardImage = styled.img<{ $aspectRatio?: "16/9" | "1/1" | "auto" }>`

app/components/Footer.tsx

@@ -90,8 +90,8 @@ const FooterContainer = styled.footer`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	background-color: rgba(0, 0, 0, 0.1);
-	backdrop-filter: blur(64px);
+	background-color: var(--color-bg);
+	border-top: 1px solid var(--color-border);
 	margin-top: auto;
 `
 
@@ -101,7 +101,7 @@ const FooterContent = styled.div`
 	align-items: center;
 	justify-content: space-between;
 	padding: 1.5rem 1rem;
-	color: #a3a3a3;
+	color: var(--color-ink-muted);
 	max-width: 1200px;
 	width: 100%;
 	gap: 1rem;
@@ -139,14 +139,14 @@ const SocialNav = styled.nav`
 const SocialLink = styled.a`
 	display: flex;
 	align-items: center;
-	color: inherit;
-	transition: opacity 0.2s ease;
+	color: var(--color-ink-muted);
+	transition: color 0.2s ease;
 
 	svg {
 		fill: currentColor;
 	}
 
 	&:hover {
-		opacity: 0.7;
+		color: var(--color-accent);
 	}
 `