feat: oklch color palette and PWA install support

1 files changed, 30 insertions, 19 deletions

diff --git a/src/app.css b/src/app.css
index b9ce7f3..4982369 100644
--- a/src/app.css
+++ b/src/app.css
@@ -20,16 +20,27 @@
 	color: var(--text);
 	background-color: var(--bg);
 
-	--bg: #f9f7f3;
-	--surface: #ffffff;
-	--text: #2d2a26;
-	--text-secondary: #8c857b;
-	--accent: #d97757;
-	--accent-hover: #c56a4d;
-	--success: #7bae7f;
-	--border: #e8e3db;
-	--shadow: rgba(45, 42, 38, 0.06);
-	--danger: #d9534f;
+	--white: oklch(1 0 0);
+	--bg: oklch(0.97 0.006 70);
+	--surface: var(--white);
+	--surface-hover: oklch(from var(--accent) 0.99 0.008 h);
+	--border: oklch(0.91 0.006 70);
+
+	--text: oklch(0.25 0.006 55);
+	--text-secondary: oklch(0.58 0.01 50);
+
+	--accent: oklch(0.66 0.12 30);
+	--accent-hover: oklch(from var(--accent) calc(l - 0.06) c h);
+
+	--success: oklch(0.72 0.07 140);
+	--danger: oklch(0.6 0.16 28);
+
+	--shadow: oklch(from var(--text) l c h / 0.06);
+	--shadow-accent: oklch(from var(--accent) l c h / 0.1);
+	--shadow-accent-focus: oklch(from var(--accent) l c h / 0.15);
+	--shadow-accent-lg: oklch(from var(--accent) l c h / 0.2);
+	--danger-bg: oklch(from var(--danger) l c h / 0.08);
+	--danger-hover-bg: oklch(from var(--danger) l c h / 0.1);
 }
 
 body {
@@ -125,8 +136,8 @@ button {
 }
 
 .item-btn:hover {
-	background: #fff8f5;
-	box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+	background: var(--surface-hover);
+	box-shadow: 0 2px 6px var(--shadow-accent);
 	transform: translateY(-1px);
 }
 
@@ -170,9 +181,9 @@ button {
 }
 
 .ref-link:hover {
-	background: #fff8f5;
+	background: var(--surface-hover);
 	color: var(--accent);
-	box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
+	box-shadow: 0 2px 6px var(--shadow-accent);
 	transform: translateY(-1px);
 }
 
@@ -203,7 +214,7 @@ button {
 	color: var(--danger);
 	font-size: 0.875rem;
 	padding: 0.5rem 0.75rem;
-	background: rgba(217, 83, 79, 0.08);
+	background: var(--danger-bg);
 	border-radius: 0.5rem;
 }
 
@@ -255,7 +266,7 @@ button {
 .form-select:focus {
 	outline: none;
 	border-color: var(--accent);
-	box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
+	box-shadow: 0 0 0 3px var(--shadow-accent-focus);
 }
 
 /* Buttons */
@@ -264,7 +275,7 @@ button {
 	border: none;
 	border-radius: 0.75rem;
 	background: var(--accent);
-	color: #fff;
+	color: var(--white);
 	font-size: 0.9375rem;
 	font-weight: 500;
 	align-self: flex-start;
@@ -276,7 +287,7 @@ button {
 .btn-primary:hover {
 	background: var(--accent-hover);
 	transform: translateY(-1px);
-	box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
+	box-shadow: 0 4px 8px var(--shadow-accent-lg);
 }
 
 .btn-ghost {
@@ -297,6 +308,6 @@ button {
 }
 
 .btn-ghost:hover {
-	background: rgba(217, 83, 79, 0.1);
+	background: var(--danger-hover-bg);
 	color: var(--danger);
 }