From 83b4fbcb5dc6566fb0e858936de9d5af07a07e64 Mon Sep 17 00:00:00 2001
From: Abdul Wahab <abdulwahabone@gmail.com>
Date: Fri, 24 Jul 2026 22:52:53 +0500
Subject: [PATCH] update

---
 picker/pages/index.astro | 18 +++++++++---------
 picker/styles/picker.css | 17 +++++++++--------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/picker/pages/index.astro b/picker/pages/index.astro
index ec1afbc96..87cfe6595 100644
--- a/picker/pages/index.astro
+++ b/picker/pages/index.astro
@@ -197,32 +197,32 @@ const roles = [
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="restrained" checked />
                   <span class="picker-strategy-copy">
-                    <strong>Restrained</strong>
-                    <span>Mostly neutral. The primary appears in a few deliberate places.</span>
+                    <span class="picker-strategy-title">Restrained</span>
+                    <span class="picker-strategy-desc">Mostly neutral. The primary appears in a few deliberate places.</span>
                   </span>
                 </label>
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="committed" />
                   <span class="picker-strategy-copy">
-                    <strong>Committed</strong>
-                    <span>One strong color does real work across the page.</span>
+                    <span class="picker-strategy-title">Committed</span>
+                    <span class="picker-strategy-desc">One strong color does real work across the page.</span>
                   </span>
                 </label>
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="full-palette" />
                   <span class="picker-strategy-copy">
-                    <strong>Full palette</strong>
-                    <span>All four colors on duty, each with a clear job.</span>
+                    <span class="picker-strategy-title">Full palette</span>
+                    <span class="picker-strategy-desc">All four colors on duty, each with a clear job.</span>
                   </span>
                 </label>
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="drenched" />
                   <span class="picker-strategy-copy">
-                    <strong>Drenched</strong>
-                    <span>The page itself is the color. Everything else sits on top.</span>
+                    <span class="picker-strategy-title">Drenched</span>
+                    <span class="picker-strategy-desc">The page itself is the color. Everything else sits on top.</span>
                   </span>
                 </label>
               </fieldset>
@@ -386,7 +386,7 @@ const roles = [
               <label class="picker-strategy-option picker-type-option">
                 <input type="radio" name="font-pair" />
                 <span class="picker-type-copy">
-                  <strong class="picker-type-sample-heading" data-pair-heading></strong>
+                  <span class="picker-type-sample-heading" data-pair-heading></span>
                   <span class="picker-type-desc">Paired with <b data-pair-body></b>. <span data-pair-why></span></span>
                 </span>
               </label>
diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index b20973295..c6acdd841 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -1136,16 +1136,16 @@ html.light .ks-button.ks-button-ghost:hover {
   gap: 6px;
 }
 
-.picker-strategy-copy strong {
+.picker-strategy-title {
   color: var(--ks-champagne);
   font-family: var(--ks-font-display);
   font-size: 1.22rem;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 1.15;
   letter-spacing: -0.01em;
 }
 
-.picker-strategy-copy span {
+.picker-strategy-desc {
   color: var(--ks-text-muted);
   font-size: 0.88rem;
   line-height: 1.5;
@@ -1155,7 +1155,7 @@ html.light .ks-button.ks-button-ghost:hover {
   background: color-mix(in oklab, var(--ks-patina-deep) 7%, var(--ks-lacquer-raised));
 }
 
-.picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
+.picker-strategy-option:has(input:checked) .picker-strategy-title {
   color: var(--ks-link-on-paper);
 }
 
@@ -1182,7 +1182,7 @@ html.light .ks-button.ks-button-ghost:hover {
   background: color-mix(in oklab, var(--ks-patina-deep) 9%, var(--ks-lacquer-raised));
 }
 
-.picker-strategy-choices .picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
+.picker-strategy-choices .picker-strategy-option:has(input:checked) .picker-strategy-title {
   color: var(--ks-link-on-paper);
 }
 
@@ -1190,14 +1190,15 @@ html.light .ks-button.ks-button-ghost:hover {
   gap: 6px;
 }
 
-.picker-strategy-choices .picker-strategy-copy strong {
+.picker-strategy-choices .picker-strategy-title {
   font-family: var(--ks-font);
   font-size: 24px;
+  font-weight: 400;
   line-height: 1.1;
   letter-spacing: -0.015em;
 }
 
-.picker-strategy-choices .picker-strategy-copy span {
+.picker-strategy-choices .picker-strategy-desc {
   font-size: 16px;
   line-height: 1.55;
   max-width: 34ch;
@@ -1974,7 +1975,7 @@ html.light .ks-button.ks-button-ghost:hover {
   color: var(--ks-champagne);
   font-family: var(--pair-heading, var(--ks-font-display));
   font-size: 24px;
-  font-weight: var(--pair-heading-weight);
+  font-weight: var(--pair-heading-weight, 400);
   line-height: 1.1;
   letter-spacing: -0.015em;
 }