Implement dark-first design system with Geist typography (#28)

Co-authored-by: Julian Tabel <juliantabel.jt@gmail.com>
Co-committed-by: Julian Tabel <juliantabel.jt@gmail.com>

frontend/src/pages/NewGenlocke.tsx

@@ -116,21 +116,19 @@ export function NewGenlocke() {
 
   return (
     <div className="max-w-4xl mx-auto p-8">
-      <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">New Genlocke</h1>
-      <p className="text-gray-600 dark:text-gray-400 mb-6">Set up your generational challenge.</p>
+      <h1 className="text-3xl font-bold text-text-primary mb-2">New Genlocke</h1>
+      <p className="text-text-tertiary mb-6">Set up your generational challenge.</p>
 
       <StepIndicator currentStep={step} onStepClick={setStep} steps={STEPS} />
 
       {/* Step 1: Name */}
       {step === 1 && (
         <div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
-            Name Your Genlocke
-          </h2>
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-text-primary mb-4">Name Your Genlocke</h2>
+          <div className="bg-surface-1 rounded-lg shadow p-6">
             <label
               htmlFor="genlocke-name"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+              className="block text-sm font-medium text-text-secondary mb-1"
             >
               Genlocke Name
             </label>
@@ -139,7 +137,7 @@ export function NewGenlocke() {
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="w-full px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-transparent"
               placeholder="My Genlocke"
               maxLength={100}
               autoFocus
@@ -151,7 +149,7 @@ export function NewGenlocke() {
               type="button"
               disabled={!name.trim()}
               onClick={() => setStep(2)}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               Next
             </button>
@@ -162,9 +160,7 @@ export function NewGenlocke() {
       {/* Step 2: Game Selection */}
       {step === 2 && (
         <div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
-            Select Games
-          </h2>
+          <h2 className="text-xl font-semibold text-text-primary mb-4">Select Games</h2>
 
           {/* Preset buttons */}
           <div className="flex gap-3 mb-6">
@@ -188,17 +184,15 @@ export function NewGenlocke() {
                   className={`flex-1 p-4 rounded-lg border-2 text-left transition-colors ${
                     isActive
                       ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
-                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                      : 'border-border-default hover:border-border-default'
                   }`}
                 >
                   <div
-                    className={`font-medium ${isActive ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-gray-100'}`}
+                    className={`font-medium ${isActive ? 'text-text-link' : 'text-text-primary'}`}
                   >
                     {labels[type]}
                   </div>
-                  <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                    {descriptions[type]}
-                  </div>
+                  <div className="text-sm text-text-tertiary mt-1">{descriptions[type]}</div>
                 </button>
               )
             })}
@@ -212,7 +206,7 @@ export function NewGenlocke() {
 
           {/* Legs list */}
           {legs.length > 0 && (
-            <div className="bg-white dark:bg-gray-800 rounded-lg shadow divide-y divide-gray-200 dark:divide-gray-700">
+            <div className="bg-surface-1 rounded-lg shadow divide-y divide-border-default">
               {legs.map((leg, index) => (
                 <LegRow
                   key={`${leg.region}-${index}`}
@@ -246,7 +240,7 @@ export function NewGenlocke() {
             <button
               type="button"
               onClick={() => setStep(1)}
-              className="px-6 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
+              className="px-6 py-2 text-text-secondary bg-surface-2 rounded-lg font-medium hover:bg-surface-3 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
             >
               Back
             </button>
@@ -254,7 +248,7 @@ export function NewGenlocke() {
               type="button"
               disabled={legs.length === 0}
               onClick={() => setStep(3)}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               Next
             </button>
@@ -268,18 +262,16 @@ export function NewGenlocke() {
           <RulesConfiguration rules={nuzlockeRules} onChange={setNuzlockeRules} />
 
           {/* Genlocke-specific rules */}
-          <div className="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow">
-            <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
-                Genlocke Rules
-              </h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">
+          <div className="mt-6 bg-surface-1 rounded-lg shadow">
+            <div className="px-4 py-3 border-b border-border-default">
+              <h3 className="text-lg font-medium text-text-primary">Genlocke Rules</h3>
+              <p className="text-sm text-text-tertiary">
                 Rules specific to the generational challenge
               </p>
             </div>
             <div className="px-4 py-4">
               <fieldset>
-                <legend className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                <legend className="text-sm font-medium text-text-secondary mb-3">
                   Hall of Fame Pokemon
                 </legend>
                 <div className="space-y-3">
@@ -289,13 +281,11 @@ export function NewGenlocke() {
                       name="hofRule"
                       checked={!genlockeRules.retireHoF}
                       onChange={() => setGenlockeRules({ retireHoF: false })}
-                      className="mt-0.5 w-4 h-4 text-blue-600 focus:ring-blue-500"
+                      className="mt-0.5 w-4 h-4 text-blue-600 focus:ring-accent-400"
                     />
                     <div>
-                      <div className="font-medium text-gray-900 dark:text-gray-100">
-                        Keep Hall of Fame
-                      </div>
-                      <div className="text-sm text-gray-500 dark:text-gray-400">
+                      <div className="font-medium text-text-primary">Keep Hall of Fame</div>
+                      <div className="text-sm text-text-tertiary">
                         Pokemon that beat the Elite Four can continue to the next leg
                       </div>
                     </div>
@@ -306,13 +296,11 @@ export function NewGenlocke() {
                       name="hofRule"
                       checked={genlockeRules.retireHoF}
                       onChange={() => setGenlockeRules({ retireHoF: true })}
-                      className="mt-0.5 w-4 h-4 text-blue-600 focus:ring-blue-500"
+                      className="mt-0.5 w-4 h-4 text-blue-600 focus:ring-accent-400"
                     />
                     <div>
-                      <div className="font-medium text-gray-900 dark:text-gray-100">
-                        Retire Hall of Fame
-                      </div>
-                      <div className="text-sm text-gray-500 dark:text-gray-400">
+                      <div className="font-medium text-text-primary">Retire Hall of Fame</div>
+                      <div className="text-sm text-text-tertiary">
                         Pokemon that beat the Elite Four are retired and cannot be used in the next
                         leg
                       </div>
@@ -324,12 +312,10 @@ export function NewGenlocke() {
           </div>
 
           {/* Naming scheme */}
-          <div className="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow">
-            <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
-                Naming Scheme
-              </h3>
-              <p className="text-sm text-gray-500 dark:text-gray-400">
+          <div className="mt-6 bg-surface-1 rounded-lg shadow">
+            <div className="px-4 py-3 border-b border-border-default">
+              <h3 className="text-lg font-medium text-text-primary">Naming Scheme</h3>
+              <p className="text-sm text-text-tertiary">
                 Get nickname suggestions from a themed word list when catching Pokemon. Applied to
                 all legs.
               </p>
@@ -338,7 +324,7 @@ export function NewGenlocke() {
               <select
                 value={namingScheme ?? ''}
                 onChange={(e) => setNamingScheme(e.target.value || null)}
-                className="w-full max-w-xs px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full max-w-xs px-3 py-2 rounded-lg border border-border-default bg-surface-2 text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-400"
               >
                 <option value="">None (manual nicknames)</option>
                 {namingCategories?.map((cat) => (
@@ -354,14 +340,14 @@ export function NewGenlocke() {
             <button
               type="button"
               onClick={() => setStep(2)}
-              className="px-6 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
+              className="px-6 py-2 text-text-secondary bg-surface-2 rounded-lg font-medium hover:bg-surface-3 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
             >
               Back
             </button>
             <button
               type="button"
               onClick={() => setStep(4)}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 transition-colors"
             >
               Next
             </button>
@@ -372,32 +358,26 @@ export function NewGenlocke() {
       {/* Step 4: Confirm */}
       {step === 4 && (
         <div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
-            Confirm & Start
-          </h2>
+          <h2 className="text-xl font-semibold text-text-primary mb-4">Confirm & Start</h2>
 
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-4">
+          <div className="bg-surface-1 rounded-lg shadow p-6 space-y-4">
             <div>
-              <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Name</h3>
-              <p className="text-gray-900 dark:text-gray-100 font-medium">{name}</p>
+              <h3 className="text-sm font-medium text-text-tertiary mb-1">Name</h3>
+              <p className="text-text-primary font-medium">{name}</p>
             </div>
 
-            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
-              <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
-                Legs ({legs.length})
-              </h3>
+            <div className="border-t border-border-default pt-4">
+              <h3 className="text-sm font-medium text-text-tertiary mb-2">Legs ({legs.length})</h3>
               <ol className="space-y-2">
                 {legs.map((leg, i) => (
                   <li key={i} className="flex items-center gap-3">
-                    <span className="text-sm text-gray-400 dark:text-gray-500 w-6 text-right font-mono">
+                    <span className="text-sm text-text-muted w-6 text-right font-mono">
                       {i + 1}.
                     </span>
                     <GameThumb game={leg.game} />
                     <div>
-                      <span className="text-gray-900 dark:text-gray-100 font-medium">
-                        {leg.game.name}
-                      </span>
-                      <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">
+                      <span className="text-text-primary font-medium">{leg.game.name}</span>
+                      <span className="text-sm text-text-tertiary ml-2">
                         {leg.region.charAt(0).toUpperCase() + leg.region.slice(1)}
                       </span>
                     </div>
@@ -406,24 +386,24 @@ export function NewGenlocke() {
               </ol>
             </div>
 
-            <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
-              <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Rules</h3>
+            <div className="border-t border-border-default pt-4">
+              <h3 className="text-sm font-medium text-text-tertiary mb-1">Rules</h3>
               <dl className="space-y-1 text-sm">
                 <div className="flex justify-between">
-                  <dt className="text-gray-600 dark:text-gray-400">Nuzlocke Rules</dt>
-                  <dd className="text-gray-900 dark:text-gray-100 font-medium">
+                  <dt className="text-text-tertiary">Nuzlocke Rules</dt>
+                  <dd className="text-text-primary font-medium">
                     {enabledRuleCount} of {totalRuleCount} enabled
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-600 dark:text-gray-400">Hall of Fame</dt>
-                  <dd className="text-gray-900 dark:text-gray-100 font-medium">
+                  <dt className="text-text-tertiary">Hall of Fame</dt>
+                  <dd className="text-text-primary font-medium">
                     {genlockeRules.retireHoF ? 'Retire' : 'Keep'}
                   </dd>
                 </div>
                 <div className="flex justify-between">
-                  <dt className="text-gray-600 dark:text-gray-400">Naming Scheme</dt>
-                  <dd className="text-gray-900 dark:text-gray-100 font-medium">
+                  <dt className="text-text-tertiary">Naming Scheme</dt>
+                  <dd className="text-text-primary font-medium">
                     {namingScheme
                       ? namingScheme.charAt(0).toUpperCase() + namingScheme.slice(1)
                       : 'None'}
@@ -434,7 +414,7 @@ export function NewGenlocke() {
           </div>
 
           {createGenlocke.error && (
-            <div className="mt-4 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
+            <div className="mt-4 rounded-lg bg-status-failed-bg p-4 text-status-failed">
               Failed to create genlocke. Please try again.
             </div>
           )}
@@ -443,7 +423,7 @@ export function NewGenlocke() {
             <button
               type="button"
               onClick={() => setStep(3)}
-              className="px-6 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
+              className="px-6 py-2 text-text-secondary bg-surface-2 rounded-lg font-medium hover:bg-surface-3 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
             >
               Back
             </button>
@@ -451,7 +431,7 @@ export function NewGenlocke() {
               type="button"
               disabled={createGenlocke.isPending}
               onClick={handleCreate}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {createGenlocke.isPending ? 'Creating...' : 'Start Genlocke'}
             </button>
@@ -486,12 +466,12 @@ function LegRow({
 
   return (
     <div className="flex items-center gap-3 px-4 py-3">
-      <span className="text-sm text-gray-400 dark:text-gray-500 w-6 text-right font-mono shrink-0">
+      <span className="text-sm text-text-muted w-6 text-right font-mono shrink-0">
         {index + 1}.
       </span>
       <GameThumb game={leg.game} />
       <div className="flex-1 min-w-0">
-        <div className="text-sm text-gray-500 dark:text-gray-400">
+        <div className="text-sm text-text-tertiary">
           {leg.region.charAt(0).toUpperCase() + leg.region.slice(1)}
         </div>
         {games.length > 1 ? (
@@ -501,7 +481,7 @@ function LegRow({
               const game = games.find((g) => g.id === Number(e.target.value))
               if (game) onGameChange(game)
             }}
-            className="mt-1 w-full max-w-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="mt-1 w-full max-w-xs px-2 py-1 rounded border border-border-default bg-surface-2 text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-accent-400"
           >
             {games.map((g) => (
               <option key={g.id} value={g.id}>
@@ -510,7 +490,7 @@ function LegRow({
             ))}
           </select>
         ) : (
-          <div className="text-gray-900 dark:text-gray-100 font-medium">{leg.game.name}</div>
+          <div className="text-text-primary font-medium">{leg.game.name}</div>
         )}
       </div>
       <div className="flex items-center gap-1 shrink-0">
@@ -518,7 +498,7 @@ function LegRow({
           type="button"
           disabled={index === 0}
           onClick={() => onMove('up')}
-          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:cursor-not-allowed"
+          className="p-1 text-gray-400 hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
           title="Move up"
         >
           <svg
@@ -535,7 +515,7 @@ function LegRow({
           type="button"
           disabled={index === total - 1}
           onClick={() => onMove('down')}
-          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:cursor-not-allowed"
+          className="p-1 text-gray-400 hover:text-text-secondary disabled:opacity-30 disabled:cursor-not-allowed"
           title="Move down"
         >
           <svg
@@ -583,7 +563,7 @@ function AddLegDropdown({
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium"
+        className="flex items-center gap-2 text-sm text-text-link hover:text-blue-700 dark:hover:text-blue-300 font-medium"
       >
         <svg
           className="w-4 h-4"
@@ -600,10 +580,8 @@ function AddLegDropdown({
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-3">
-      <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-        Select a region to add
-      </div>
+    <div className="bg-surface-1 rounded-lg shadow p-3">
+      <div className="text-sm font-medium text-text-secondary mb-2">Select a region to add</div>
       <div className="flex flex-wrap gap-2">
         {regions.map((region) => (
           <button
@@ -613,7 +591,7 @@ function AddLegDropdown({
               onAdd(region)
               setOpen(false)
             }}
-            className="px-3 py-1.5 rounded-md text-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+            className="px-3 py-1.5 rounded-md text-sm bg-surface-2 text-text-primary hover:bg-surface-3 transition-colors"
           >
             {region.name.charAt(0).toUpperCase() + region.name.slice(1)}
           </button>
@@ -621,7 +599,7 @@ function AddLegDropdown({
         <button
           type="button"
           onClick={() => setOpen(false)}
-          className="px-3 py-1.5 rounded-md text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
+          className="px-3 py-1.5 rounded-md text-sm text-text-tertiary hover:text-text-secondary"
         >
           Cancel
         </button>