fix(theme): align initial theme and visual tokens

src/styles/globals.css

@@ -21,18 +21,6 @@ html {
   color-scheme: light;
 }
 
-@media (max-width: 1024px) {
-  html {
-    font-size: 93.75%;
-  }
-}
-
-@media (max-width: 650px) {
-  html {
-    font-size: 87.5%;
-  }
-}
-
 html[data-theme="dark"] {
   color-scheme: dark;
 }
@@ -117,9 +105,11 @@ body {
 }
 
 .section-title {
-  font-size: var(--font-size-h2);
-  line-height: var(--line-height-h2);
-  font-weight: 700;
+  max-width: 24ch;
+  font-size: clamp(1.875rem, 3vw, 2.5rem);
+  line-height: 1.15;
+  font-weight: 760;
+  letter-spacing: -0.035em;
   color: var(--text-primary);
   margin-bottom: 0.75rem;
 }
@@ -158,6 +148,20 @@ body {
     box-shadow var(--motion-duration-default) ease,
     transform var(--motion-duration-fast) var(--motion-ease-out);
   border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.pill-btn:focus-visible,
+a:focus-visible,
+button:focus-visible,
+input:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+.pill-btn:active,
+button:active:not(:disabled) {
+  transform: translateY(1px) scale(0.99);
 }
 
 .pill-btn-outline {