@3fn/core 14.1.0 → 15.0.0

package/dist/DesignTokens.dtcg.json

@@ -3,8 +3,8 @@
   "$extensions": {
     "designerpunk": {
       "version": "1.0.0",
-      "generatedAt": "2026-08-26T14:15:24.259Z",
-      "rosettaVersion": "14.1.0"
+      "generatedAt": "2026-10-03T02:14:57.175Z",
+      "rosettaVersion": "15.0.0"
     }
   },
   "space": {
@@ -193,552 +193,802 @@
   "color": {
     "$type": "color",
     "gray100": {
-      "$value": "rgba(178, 188, 196, 1)",
+      "$value": "#9ea5b0",
       "$type": "color",
       "$description": "Light gray for subtle backgrounds and muted text",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic gray scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.72,
+            "c": 0.018,
+            "h": 260
+          }
         }
       }
     },
     "gray200": {
-      "$value": "rgba(94, 112, 124, 1)",
+      "$value": "#7f8793",
       "$type": "color",
       "$description": "Medium-light gray for secondary text and borders",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic gray scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.62,
+            "c": 0.02,
+            "h": 260
+          }
         }
       }
     },
     "gray300": {
-      "$value": "rgba(38, 50, 58, 1)",
+      "$value": "#626975",
       "$type": "color",
       "$description": "Medium gray for primary text and prominent borders",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic gray scale progression - medium",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.52,
+            "c": 0.02,
+            "h": 260
+          }
         }
       }
     },
     "gray400": {
-      "$value": "rgba(24, 34, 40, 1)",
+      "$value": "#474d57",
       "$type": "color",
       "$description": "Dark gray for strong text and container backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic gray scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.42,
+            "c": 0.018,
+            "h": 260
+          }
         }
       }
     },
     "gray500": {
-      "$value": "rgba(16, 22, 26, 1)",
+      "$value": "#2e333b",
       "$type": "color",
       "$description": "Darkest gray for deep backgrounds and high contrast text",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic gray scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.32,
+            "c": 0.015,
+            "h": 260
+          }
         }
       }
     },
     "black100": {
-      "$value": "rgba(58, 58, 69, 1)",
+      "$value": "#25292f",
       "$type": "color",
       "$description": "Light black for subtle container backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic black scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.28,
+            "c": 0.013,
+            "h": 260
+          }
         }
       }
     },
     "black200": {
-      "$value": "rgba(34, 34, 42, 1)",
+      "$value": "#16181d",
       "$type": "color",
       "$description": "Medium black for container backgrounds and surfaces",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic black scale progression - medium",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.21,
+            "c": 0.01,
+            "h": 260
+          }
         }
       }
     },
     "black300": {
-      "$value": "rgba(10, 10, 15, 1)",
+      "$value": "#07090c",
       "$type": "color",
       "$description": "Dark black for primary backgrounds and deep containers",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic black scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.14,
+            "c": 0.008,
+            "h": 260
+          }
         }
       }
     },
     "black400": {
-      "$value": "rgba(6, 6, 10, 1)",
+      "$value": "#010102",
       "$type": "color",
       "$description": "Very dark black for deep system backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic black scale progression - very dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.07,
+            "c": 0.004,
+            "h": 260
+          }
         }
       }
     },
     "black500": {
-      "$value": "rgba(0, 0, 0, 1)",
+      "$value": "#000000",
       "$type": "color",
       "$description": "Pure black for maximum contrast and system elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic black scale progression - pure black",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0,
+            "c": 0,
+            "h": 260
+          }
         }
       }
     },
     "white100": {
-      "$value": "rgba(255, 255, 255, 1)",
+      "$value": "#ffffff",
       "$type": "color",
       "$description": "Pure white for maximum contrast and primary surfaces",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic white scale progression - pure white",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 1,
+            "c": 0,
+            "h": 260
+          }
         }
       }
     },
     "white200": {
-      "$value": "rgba(245, 245, 250, 1)",
+      "$value": "#eceff3",
       "$type": "color",
       "$description": "Near-white for subtle surface variations",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic white scale progression - near white",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.95,
+            "c": 0.006,
+            "h": 260
+          }
         }
       }
     },
     "white300": {
-      "$value": "rgba(232, 232, 240, 1)",
+      "$value": "#dadee5",
       "$type": "color",
       "$description": "Light gray-white for secondary surfaces and backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic white scale progression - light gray-white",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.9,
+            "c": 0.01,
+            "h": 260
+          }
         }
       }
     },
     "white400": {
-      "$value": "rgba(197, 197, 213, 1)",
+      "$value": "#c9ced6",
       "$type": "color",
       "$description": "Medium gray-white for borders and dividers",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic white scale progression - medium gray-white",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.85,
+            "c": 0.013,
+            "h": 260
+          }
         }
       }
     },
     "white500": {
-      "$value": "rgba(153, 153, 171, 1)",
+      "$value": "#b8bec8",
       "$type": "color",
       "$description": "Dark gray-white for muted text and subtle elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic white scale progression - dark gray-white",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.8,
+            "c": 0.015,
+            "h": 260
+          }
         }
       }
     },
     "yellow100": {
-      "$value": "rgba(254, 251, 204, 1)",
+      "$value": "#fdfccd",
       "$type": "color",
       "$description": "Light yellow for subtle warning backgrounds and highlights",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic yellow scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.98,
+            "c": 0.061,
+            "h": 107
+          }
         }
       }
     },
     "yellow200": {
-      "$value": "rgba(252, 246, 128, 1)",
+      "$value": "#e9e46f",
       "$type": "color",
       "$description": "Medium-light yellow for warning highlights and attention",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic yellow scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.9,
+            "c": 0.14,
+            "h": 107
+          }
         }
       }
     },
     "yellow300": {
-      "$value": "rgba(249, 240, 2, 1)",
+      "$value": "#cbc400",
       "$type": "color",
       "$description": "Bright yellow for high-energy CTAs and urgent warnings",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic yellow scale progression - bright",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.8,
+            "c": 0.2,
+            "h": 107
+          }
         }
       }
     },
     "yellow400": {
-      "$value": "rgba(199, 192, 2, 1)",
+      "$value": "#a39d00",
       "$type": "color",
       "$description": "Dark yellow for warning text and secondary warning elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic yellow scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.68,
+            "c": 0.169,
+            "h": 107
+          }
         }
       }
     },
     "yellow500": {
-      "$value": "rgba(143, 139, 1, 1)",
+      "$value": "#7d7800",
       "$type": "color",
       "$description": "Darkest yellow for warning text on light backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic yellow scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.56,
+            "c": 0.133,
+            "h": 107
+          }
         }
       }
     },
     "orange100": {
-      "$value": "rgba(255, 229, 220, 1)",
+      "$value": "#ffe5dc",
       "$type": "color",
       "$description": "Light orange for subtle error backgrounds and warm highlights",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic orange scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.94,
+            "c": 0.031,
+            "h": 39.5
+          }
         }
       }
     },
     "orange200": {
-      "$value": "rgba(255, 184, 160, 1)",
+      "$value": "#feb79f",
       "$type": "color",
       "$description": "Medium-light orange for warm accents and secondary CTAs (Cyberpunk WCAG - AA Large ~3:1 for headings)",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic orange scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.84,
+            "c": 0.089,
+            "h": 39.5
+          }
         }
       }
     },
     "orange300": {
-      "$value": "rgba(255, 107, 53, 1)",
+      "$value": "#fd6a32",
       "$type": "color",
       "$description": "Bright orange for approachable error states and warm CTAs (Cyberpunk WCAG - AA ~4.5:1 for body text)",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic orange scale progression - bright",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.7,
+            "c": 0.193,
+            "h": 39.5
+          }
         }
       }
     },
     "orange400": {
-      "$value": "rgba(204, 85, 41, 1)",
+      "$value": "#cd562a",
       "$type": "color",
       "$description": "Dark orange for error text and secondary error elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic orange scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.6,
+            "c": 0.162,
+            "h": 39.5
+          }
         }
       }
     },
     "orange500": {
-      "$value": "rgba(143, 60, 29, 1)",
+      "$value": "#8e3b1d",
       "$type": "color",
       "$description": "Darkest orange for error text on light backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic orange scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.46,
+            "c": 0.121,
+            "h": 39.5
+          }
         }
       }
     },
     "purple100": {
-      "$value": "rgba(243, 224, 255, 1)",
+      "$value": "#f1e0ff",
       "$type": "color",
       "$description": "Light purple for subtle brand backgrounds and highlights",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic purple scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.93,
+            "c": 0.046,
+            "h": 310
+          }
         }
       }
     },
     "purple200": {
-      "$value": "rgba(217, 138, 255, 1)",
+      "$value": "#d190ff",
       "$type": "color",
       "$description": "Medium-light purple for brand accents and secondary elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic purple scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.76,
+            "c": 0.179,
+            "h": 310
+          }
         }
       }
     },
     "purple300": {
-      "$value": "rgba(176, 38, 255, 1)",
+      "$value": "#b322fb",
       "$type": "color",
       "$description": "Bright purple for primary brand color and focus states",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic purple scale progression - primary brand",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.6,
+            "c": 0.286,
+            "h": 310
+          }
         }
       }
     },
     "purple400": {
-      "$value": "rgba(141, 30, 204, 1)",
+      "$value": "#8f1bc9",
       "$type": "color",
       "$description": "Dark purple for brand text and secondary brand elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic purple scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.51,
+            "c": 0.241,
+            "h": 310
+          }
         }
       }
     },
     "purple500": {
-      "$value": "rgba(99, 21, 143, 1)",
+      "$value": "#65168f",
       "$type": "color",
       "$description": "Darkest purple for brand text on light backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic purple scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.4,
+            "c": 0.183,
+            "h": 310
+          }
         }
       }
     },
     "pink100": {
-      "$value": "rgba(255, 218, 232, 1)",
+      "$value": "#ffdade",
       "$type": "color",
       "$description": "Lightest hot pink - subtle error backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic pink scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.92,
+            "c": 0.045,
+            "h": 10
+          }
         }
       }
     },
     "pink200": {
-      "$value": "rgba(255, 130, 180, 1)",
+      "$value": "#ff869c",
       "$type": "color",
       "$description": "Medium-light hot pink - error highlights (Cyberpunk WCAG - AA Large ~3:1 for headings)",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic pink scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.76,
+            "c": 0.16,
+            "h": 10
+          }
         }
       }
     },
     "pink300": {
-      "$value": "rgba(255, 42, 109, 1)",
+      "$value": "#fe286d",
       "$type": "color",
       "$description": "Bright hot pink - base pink color (Cyberpunk WCAG - AA ~4.5:1 for body text)",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic pink scale progression - base",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.65,
+            "c": 0.242,
+            "h": 10
+          }
         }
       }
     },
     "pink400": {
-      "$value": "rgba(204, 34, 87, 1)",
+      "$value": "#cb2056",
       "$type": "color",
       "$description": "Dark hot pink - primary error color",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic pink scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.55,
+            "c": 0.203,
+            "h": 10
+          }
         }
       }
     },
     "pink500": {
-      "$value": "rgba(128, 21, 55, 1)",
+      "$value": "#811736",
       "$type": "color",
       "$description": "Darkest hot pink - strong error color",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic pink scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.4,
+            "c": 0.141,
+            "h": 10
+          }
         }
       }
     },
     "green100": {
-      "$value": "rgba(230, 255, 245, 1)",
+      "$value": "#e7fbec",
       "$type": "color",
       "$description": "Lightest electric green - subtle success backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic green scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.97,
+            "c": 0.029,
+            "h": 154
+          }
         }
       }
     },
     "green200": {
-      "$value": "rgba(128, 255, 187, 1)",
+      "$value": "#80f4aa",
       "$type": "color",
       "$description": "Medium-light electric green - success highlights (Cyberpunk WCAG - AA Large ~3:1 for headings)",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic green scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.88,
+            "c": 0.149,
+            "h": 154
+          }
         }
       }
     },
     "green300": {
-      "$value": "rgba(51, 255, 153, 1)",
+      "$value": "#00da7a",
       "$type": "color",
       "$description": "Bright electric green - success accents (Cyberpunk WCAG - AA ~4.5:1 for body text)",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic green scale progression - bright",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.78,
+            "c": 0.208,
+            "h": 154
+          }
         }
       }
     },
     "green400": {
-      "$value": "rgba(0, 255, 136, 1)",
+      "$value": "#00ae60",
       "$type": "color",
       "$description": "Strong electric green - primary success color",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic green scale progression - strong",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.66,
+            "c": 0.18,
+            "h": 154
+          }
         }
       }
     },
     "green500": {
-      "$value": "rgba(0, 204, 110, 1)",
+      "$value": "#008548",
       "$type": "color",
       "$description": "Darkest electric green - neon glow effect",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic green scale progression - darkest/glow",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.54,
+            "c": 0.14,
+            "h": 154
+          }
         }
       }
     },
     "cyan100": {
-      "$value": "rgba(204, 251, 255, 1)",
+      "$value": "#d0fbff",
       "$type": "color",
       "$description": "Light cyan for subtle tech backgrounds and success highlights",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic cyan scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.96,
+            "c": 0.048,
+            "h": 202.5
+          }
         }
       }
     },
     "cyan200": {
-      "$value": "rgba(128, 246, 255, 1)",
+      "$value": "#72e9f3",
       "$type": "color",
       "$description": "Medium-light cyan for tech accents and link highlights",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic cyan scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.87,
+            "c": 0.108,
+            "h": 202.5
+          }
         }
       }
     },
     "cyan300": {
-      "$value": "rgba(0, 240, 255, 1)",
+      "$value": "#00c9d5",
       "$type": "color",
       "$description": "Bright cyan for tech elements, links, and success states",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic cyan scale progression - tech primary",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.76,
+            "c": 0.148,
+            "h": 202.5
+          }
         }
       }
     },
     "cyan400": {
-      "$value": "rgba(0, 192, 204, 1)",
+      "$value": "#009fa9",
       "$type": "color",
       "$description": "Dark cyan for tech text and secondary success elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic cyan scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.64,
+            "c": 0.125,
+            "h": 202.5
+          }
         }
       }
     },
     "cyan500": {
-      "$value": "rgba(0, 136, 143, 1)",
+      "$value": "#00787f",
       "$type": "color",
       "$description": "Darkest cyan for tech text on light backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic cyan scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.52,
+            "c": 0.097,
+            "h": 202.5
+          }
         }
       }
     },
     "teal100": {
-      "$value": "rgba(217, 232, 234, 1)",
+      "$value": "#cbecf1",
       "$type": "color",
       "$description": "Light teal for subtle secondary backgrounds and highlights",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic teal scale progression - lightest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.92,
+            "c": 0.035,
+            "h": 209
+          }
         }
       }
     },
     "teal200": {
-      "$value": "rgba(77, 155, 165, 1)",
+      "$value": "#4ab6c6",
       "$type": "color",
       "$description": "Medium-light teal for secondary UI elements and accents",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic teal scale progression - medium-light",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.72,
+            "c": 0.1,
+            "h": 209
+          }
         }
       }
     },
     "teal300": {
-      "$value": "rgba(26, 83, 92, 1)",
+      "$value": "#207582",
       "$type": "color",
       "$description": "Medium teal for secondary UI elements and alternative success states",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic teal scale progression - secondary UI",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.52,
+            "c": 0.08,
+            "h": 209
+          }
         }
       }
     },
     "teal400": {
-      "$value": "rgba(21, 66, 74, 1)",
+      "$value": "#0e4b53",
       "$type": "color",
       "$description": "Dark teal for secondary text and UI elements",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic teal scale progression - dark",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.38,
+            "c": 0.06,
+            "h": 209
+          }
         }
       }
     },
     "teal500": {
-      "$value": "rgba(15, 46, 51, 1)",
+      "$value": "#052f35",
       "$type": "color",
       "$description": "Darkest teal for secondary text on light backgrounds",
       "$extensions": {
         "designerpunk": {
           "formula": "Systematic teal scale progression - darkest",
-          "family": "color"
+          "family": "color",
+          "oklch": {
+            "l": 0.28,
+            "c": 0.045,
+            "h": 209
+          }
         }
       }
     },
@@ -1517,7 +1767,7 @@
     "tapAreaMinimum": {
       "$value": "44px",
       "$type": "dimension",
-      "$description": "Minimum tap area - WCAG 2.1 AA compliance (44pt)",
+      "$description": "Minimum tap area - WCAG 2.5.5 Target Size, Level AAA (44pt); exceeds the 24pt WCAG 2.2 AA minimum (SC 2.5.8)",
       "$extensions": {
         "designerpunk": {
           "formula": "base × 1 = 44 × 1 = 44",
@@ -2420,12 +2670,16 @@
   "semanticColor": {
     "$type": "color",
     "color.feedback.success.text": {
-      "$value": "{color.green400}",
+      "$value": "{color.green500}",
       "$type": "color",
-      "$description": "Green text color for success states - form validation, confirmation messages, positive feedback",
+      "$description": "Green text color for success states - form validation, confirmation messages, positive feedback. References green500 for WCAG AA contrast (4.72:1) against the light canvas; dark theme overrides to green300 (4.63:1 against the dark canvas).",
       "$extensions": {
         "designerpunk": {
-          "family": "color"
+          "family": "color",
+          "modes": {
+            "light": "oklch(0.54 0.14 154)",
+            "dark": "oklch(0.78 0.208 154)"
+          }
         }
       }
     },
@@ -2716,30 +2970,42 @@
     "color.text.default": {
       "$value": "{color.gray300}",
       "$type": "color",
-      "$description": "Primary gray for main text content",
+      "$description": "Primary gray for main text content. Dark theme overrides to white100 (8.46:1 against the dark canvas) for WCAG AA.",
       "$extensions": {
         "designerpunk": {
-          "family": "color"
+          "family": "color",
+          "modes": {
+            "light": "oklch(0.52 0.02 260)",
+            "dark": "oklch(1 0 260)"
+          }
         }
       }
     },
     "color.text.muted": {
       "$value": "{color.gray200}",
       "$type": "color",
-      "$description": "Muted gray for secondary and less prominent text",
+      "$description": "Muted gray for secondary and less prominent text. Dark theme overrides to white300 (6.28:1 against the dark canvas) for WCAG AA.",
       "$extensions": {
         "designerpunk": {
-          "family": "color"
+          "family": "color",
+          "modes": {
+            "light": "oklch(0.62 0.02 260)",
+            "dark": "oklch(0.9 0.01 260)"
+          }
         }
       }
     },
     "color.text.subtle": {
       "$value": "{color.gray100}",
       "$type": "color",
-      "$description": "Subtle gray for tertiary and very subtle text elements",
+      "$description": "Subtle gray for tertiary and very subtle text elements. Dark theme overrides to white500 (4.53:1 against the dark canvas) for WCAG AA.",
       "$extensions": {
         "designerpunk": {
-          "family": "color"
+          "family": "color",
+          "modes": {
+            "light": "oklch(0.72 0.018 260)",
+            "dark": "oklch(0.8 0.015 260)"
+          }
         }
       }
     },
@@ -5104,7 +5370,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Small body typography with 14px font size, 1.25 line height, body font family, normal weight",
+      "$description": "Small body typography with 14px font size, 1.429 line height, body font family, normal weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5150,7 +5416,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Large body typography with 18px font size, 1.75 line height, body font family, normal weight",
+      "$description": "Large body typography with 18px font size, 1.556 line height, body font family, normal weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5380,7 +5646,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Small button typography with 14px font size, 1.25 line height, body font family, medium weight",
+      "$description": "Small button typography with 14px font size, 1.429 line height, body font family, medium weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5426,7 +5692,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Large button typography with 18px font size, 1.75 line height, body font family, medium weight",
+      "$description": "Large button typography with 18px font size, 1.556 line height, body font family, medium weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5472,7 +5738,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Extra small label typography with 13px font size, 1.0 line height, body font family, medium weight for floating labels",
+      "$description": "Extra small label typography with 13px font size, 1.538 line height, body font family, medium weight for floating labels",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5495,7 +5761,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Small label typography with 14px font size, 1.25 line height, body font family, medium weight",
+      "$description": "Small label typography with 14px font size, 1.429 line height, body font family, medium weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5541,7 +5807,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Medium label typography scaled to 14px (fontSize100 × scale088) for floated label state, maintains same lineHeight, fontFamily, fontWeight, and letterSpacing as labelMd to prevent layout shift during animation",
+      "$description": "Medium label typography scaled to 14px (fontSize100 × scale088) for floated label state, 1.429 line height (lineHeight075, the pairing for the scaled fontSize), body font family, medium weight, default letter spacing — fontFamily, fontWeight, and letterSpacing match labelMd",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5564,7 +5830,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Large label typography with 18px font size, 1.75 line height, body font family, medium weight",
+      "$description": "Large label typography with 18px font size, 1.556 line height, body font family, medium weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5587,7 +5853,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Small code typography with 14px font size, 1.25 line height, monospace font family, normal weight",
+      "$description": "Small code typography with 14px font size, 1.429 line height, monospace font family, normal weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",
@@ -5633,7 +5899,7 @@
         "letterSpacing": "{letterSpacing.letterSpacing100}"
       },
       "$type": "typography",
-      "$description": "Large code typography with 18px font size, 1.75 line height, monospace font family, normal weight",
+      "$description": "Large code typography with 18px font size, 1.556 line height, monospace font family, normal weight",
       "$extensions": {
         "designerpunk": {
           "family": "typography",