From 76d851ad11e2d5ae76828b9d7457934c483d96ef Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Thu, 29 Jan 2026 16:39:55 -0800
Subject: [PATCH] feat: theme

---
 src/App.css | 149 ++++++++++++++++++++++++++--------------------------
 1 file changed, 75 insertions(+), 74 deletions(-)

diff --git a/src/App.css b/src/App.css
index ffb3685..b3b7b5d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,16 +4,28 @@
   line-height: 1.5;
   font-weight: 400;
 
-  --primary-color: #3b82f6;
-  --primary-hover: #2563eb;
-  --secondary-color: #10b981;
-  --danger-color: #ef4444;
-  --bg-color: #ffffff;
-  --surface-color: #f9fafb;
-  --text-color: #111827;
-  --text-secondary: #6b7280;
-  --border-color: #e5e7eb;
-  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  /* Witchy Purple Rose Palette */
+  --witch-purple: #2B1B3D;
+  --witch-plum: #44275A;
+  --witch-rose: #A8577E;
+  --witch-mauve: #D4A5C7;
+  --witch-lavender: #E8D5E8;
+  --witch-black: #0A0009;
+  --witch-silver: #C0C0C0;
+  --witch-moon: #F5F5F5;
+  --witch-shadow: rgba(10, 0, 9, 0.7);
+
+  /* Theme mappings */
+  --primary-color: var(--witch-rose);
+  --primary-hover: var(--witch-plum);
+  --secondary-color: var(--witch-mauve);
+  --danger-color: #D4658E;
+  --bg-color: var(--witch-black);
+  --surface-color: var(--witch-purple);
+  --text-color: var(--witch-moon);
+  --text-secondary: var(--witch-silver);
+  --border-color: var(--witch-plum);
+  --shadow: 0 4px 6px -1px var(--witch-shadow), 0 2px 4px -1px var(--witch-shadow);
 
   color: var(--text-color);
   background-color: var(--bg-color);
@@ -63,12 +75,13 @@ body {
 
 /* Warning Banner */
 .warning-banner {
-  background-color: #fef3c7;
-  color: #92400e;
+  background-color: var(--witch-plum);
+  color: var(--witch-lavender);
   padding: 1rem;
   border-radius: 0.5rem;
   margin-bottom: 2rem;
   text-align: center;
+  border: 1px solid var(--witch-rose);
 }
 
 /* App Content */
@@ -99,9 +112,9 @@ body {
   font-size: 1.25rem;
   padding: 1rem 2rem;
   border-radius: 0.75rem;
-  border: 2px solid transparent;
+  border: 2px solid var(--witch-rose);
   background-color: var(--primary-color);
-  color: white;
+  color: var(--witch-moon);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
@@ -109,11 +122,10 @@ body {
 }
 
 .record-button:hover {
-  background-color: var(--primary-hover);
+  background-color: var(--witch-mauve);
   transform: translateY(-2px);
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 6px 12px -2px var(--witch-shadow);
+  border-color: var(--witch-lavender);
 }
 
 .record-button.recording {
@@ -121,7 +133,7 @@ body {
 }
 
 .record-button.recording:hover {
-  background-color: #dc2626;
+  background-color: #B94A6D;
 }
 
 .recording-indicator {
@@ -162,7 +174,7 @@ body {
   gap: 1rem;
   padding: 1rem 1.5rem;
   background-color: var(--surface-color);
-  border: 1px solid var(--danger-color);
+  border: 1px solid var(--witch-rose);
   border-radius: 0.75rem;
   box-shadow: var(--shadow);
 }
@@ -190,9 +202,9 @@ body {
 .stop-button {
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
-  border: 2px solid var(--danger-color);
+  border: 2px solid var(--witch-rose);
   background-color: transparent;
-  color: var(--danger-color);
+  color: var(--witch-rose);
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
@@ -200,8 +212,9 @@ body {
 }
 
 .stop-button:hover {
-  background-color: var(--danger-color);
-  color: white;
+  background-color: var(--witch-rose);
+  color: var(--witch-moon);
+  box-shadow: 0 2px 4px var(--witch-shadow);
 }
 
 /* Transcribing Indicator */
@@ -248,13 +261,16 @@ body {
 }
 
 .primary-button {
-  background-color: var(--secondary-color);
-  color: white;
+  background-color: var(--witch-mauve);
+  color: var(--witch-purple);
+  font-weight: 600;
 }
 
 .primary-button:hover:not(:disabled) {
-  background-color: #059669;
+  background-color: var(--witch-rose);
+  color: var(--witch-moon);
   transform: translateY(-1px);
+  box-shadow: 0 4px 8px var(--witch-shadow);
 }
 
 .primary-button:disabled {
@@ -263,13 +279,15 @@ body {
 }
 
 .secondary-button {
-  background-color: var(--surface-color);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
+  background-color: transparent;
+  color: var(--witch-lavender);
+  border: 1px solid var(--witch-plum);
 }
 
 .secondary-button:hover {
-  background-color: var(--border-color);
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
+  border-color: var(--witch-rose);
 }
 
 /* Content Grid */
@@ -296,6 +314,7 @@ body {
   display: flex;
   flex-direction: column;
   max-height: 600px;
+  box-shadow: var(--shadow);
 }
 
 .transcript-display h2,
@@ -337,6 +356,7 @@ body {
 .speaker {
   font-weight: 600;
   font-size: 0.875rem;
+  color: var(--witch-mauve);
 }
 
 .timestamp {
@@ -359,15 +379,17 @@ body {
 .download-button {
   padding: 0.5rem 1rem;
   border-radius: 0.375rem;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
+  border: 1px solid var(--witch-plum);
+  background-color: transparent;
+  color: var(--witch-silver);
   font-size: 0.875rem;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .download-button:hover {
-  background-color: var(--surface-color);
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
 }
 
 .summary-text {
@@ -388,8 +410,9 @@ body {
 .spinner {
   width: 3rem;
   height: 3rem;
-  border: 3px solid var(--border-color);
-  border-top-color: var(--primary-color);
+  border: 3px solid var(--witch-plum);
+  border-top-color: var(--witch-rose);
+  border-right-color: var(--witch-mauve);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -432,7 +455,7 @@ body {
   display: flex;
   flex-direction: column;
   z-index: 100;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -2px 10px var(--witch-shadow);
 }
 
 .logs-header {
@@ -470,8 +493,8 @@ body {
   padding: 0.5rem 1rem;
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   font-size: 0.75rem;
-  background-color: #1a1a2e;
-  color: #d4d4d4;
+  background-color: var(--witch-black);
+  color: var(--witch-silver);
 }
 
 .logs-empty {
@@ -552,7 +575,7 @@ body {
 
 .error-message {
   color: var(--danger-color);
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba(212, 101, 142, 0.1);
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid var(--danger-color);
@@ -570,31 +593,7 @@ body {
   margin: 1rem auto;
 }
 
-/* Dark Mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #111827;
-    --surface-color: #1f2937;
-    --text-color: #f3f4f6;
-    --text-secondary: #9ca3af;
-    --border-color: #374151;
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  }
-
-  .warning-banner {
-    background-color: #451a03;
-    color: #fbbf24;
-  }
-
-  .recording-item {
-    background-color: var(--surface-color);
-    border-color: var(--border-color);
-  }
-
-  .recording-item:hover {
-    background-color: var(--bg-color);
-  }
-}
+/* Unified Witchy Purple Rose Theme - No Dark/Light Modes */
 
 /* New layout styles */
 .app-layout {
@@ -637,7 +636,7 @@ body {
   border-radius: 0.375rem;
   cursor: pointer;
   transition: all 0.2s;
-  background-color: white;
+  background-color: var(--witch-purple);
   border: 1px solid var(--border-color);
 }
 
@@ -647,20 +646,22 @@ body {
 }
 
 .transcript-item:hover {
-  background-color: var(--surface-color);
+  background-color: var(--witch-plum);
+  border-color: var(--witch-rose);
 }
 
 .transcript-item.selected {
-  background-color: var(--primary-color);
-  color: white;
+  background-color: var(--witch-rose);
+  color: var(--witch-moon);
+  border-color: var(--witch-mauve);
 }
 
 .transcript-item.selected .transcript-time {
-  color: white;
+  color: var(--witch-moon);
 }
 
 .transcript-item.selected .transcript-status {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--witch-lavender);
 }
 
 .transcript-title {
@@ -701,8 +702,8 @@ body {
 }
 
 .transcript-item.selected .delete-button {
-  border-color: rgba(255, 255, 255, 0.5);
-  color: white;
+  border-color: var(--witch-lavender);
+  color: var(--witch-moon);
 }
 
 .transcript-item.selected .delete-button:hover {
@@ -809,7 +810,7 @@ body {
   background: linear-gradient(
     90deg,
     transparent 0%,
-    rgba(255, 255, 255, 0.2) 50%,
+    rgba(232, 213, 232, 0.2) 50%,
     transparent 100%
   );
   animation: shimmer 1.5s infinite;