Polish dev-overlay text styling (#63721)

Follow up for #63522 

Adding more polish details for the dev overlay header
- The quoted text uses lighter color of text and use default font weight
- Use the same color for the link and give it a bold font weight
- Use the wilder support sans font for apple devices


### After vs Before
<img width="335" alt="image"
src="https://github.com/vercel/next.js/assets/4800338/a401f958-a5a1-443d-b2e9-f011de44f882">

<img width="335" alt="image"
src="https://github.com/vercel/next.js/assets/4800338/4b1340b7-6664-47ef-8935-cf715d6a3f63">




Closes NEXT-2935

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -266,13 +266,18 @@ export function Errors({
             </h1>
             <p
               id="nextjs__container_errors_desc"
-              className="nextjs__container_errors_desc nextjs__container_errors_desc--error"
+              className="nextjs__container_errors_desc"
             >
               {error.name}: <HotlinkedText text={error.message} />
             </p>
             {hydrationWarning && (
               <>
-                <p id="nextjs__container_errors__extra">{hydrationWarning}</p>
+                <p
+                  id="nextjs__container_errors__extra"
+                  className="nextjs__container_errors__extra"
+                >
+                  {hydrationWarning}
+                </p>
                 {activeError.componentStackFrames?.length ? (
                   <PseudoHtmlDiff
                     className="nextjs__container_errors__extra_code"
@@ -307,42 +312,43 @@ export const styles = css`
     font-size: var(--size-font-big);
     line-height: var(--size-font-bigger);
     font-weight: bold;
-    margin: 0;
-    margin-top: calc(var(--size-gap-double) + var(--size-gap-half));
+    margin: var(--size-gap-double) 0;
   }
   .nextjs-container-errors-header small {
     font-size: var(--size-font-small);
     color: var(--color-accents-1);
     margin-left: var(--size-gap-double);
   }
   .nextjs-container-errors-header small > span {
-    font-family: sans-serif;
+    font-family: var(--font-stack-sans);
   }
   .nextjs-container-errors-header p {
-    font-family: sans-serif;
+    font-family: var(--font-stack-sans);
     font-size: var(--size-font-small);
     line-height: var(--size-font-big);
-    font-weight: bold;
     margin: 0;
-    margin-top: var(--size-gap-half);
+    margin-top: var(--size-gap);
     white-space: pre-wrap;
   }
-  .nextjs__container_errors_desc--error {
+  .nextjs__container_errors_desc {
     padding-left: var(--size-gap);
     border-left: 4px solid var(--color-accents-1);
-    color: var(--color-font);
+    margin-top: var(--size-gap);
+    font-weight: 500;
+    color: var(--color-stack-subline);
   }
   .nextjs__container_errors__extra {
-    margin: 20px 0;
+    margin: var(--size-gap-half) 0;
+    color: var(--color-stack-headline);
+    font-weight: 500;
   }
   .nextjs-container-errors-header > div > small {
     margin: 0;
     margin-top: var(--size-gap-half);
   }
   .nextjs-container-errors-header > p > a {
-    color: var(--color-ansi-red);
+    font-weight: bold;
   }
-
   .nextjs-container-errors-body > h2:not(:first-child) {
     margin-top: calc(var(--size-gap-double) + var(--size-gap));
   }
@@ -351,7 +357,7 @@ export const styles = css`
     font-size: var(--size-font-big);
   }
   .nextjs__container_errors__extra_code {
-    margin: 20px 0;
+    margin-top: var(--size-gap);
     padding: 12px 32px;
     color: var(--color-ansi-fg);
     background: var(--color-ansi-bg);

packages/next/src/client/components/react-dev-overlay/internal/container/root-layout-missing-tags-error.tsx

@@ -29,7 +29,7 @@ export const RootLayoutMissingTagsError: React.FC<RootLayoutMissingTagsErrorProp
               {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
               <p
                 id="nextjs__container_errors_desc"
-                className="nextjs__container_errors_desc nextjs__container_errors_desc--error"
+                className="nextjs__container_errors_desc"
               >
                 <HotlinkedText
                   text={`The following tags are missing in the Root Layout: ${missingTags

packages/next/src/client/components/react-dev-overlay/internal/styles/Base.tsx

@@ -31,6 +31,7 @@ export function Base() {
 
           --font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',
             Menlo, Courier, monospace;
+          --font-stack-sans: -apple-system, BlinkMacSystemFont, sans-serif;
 
           --color-ansi-selection: rgba(95, 126, 151, 0.48);
           --color-ansi-bg: #111111;
@@ -62,7 +63,7 @@ export function Base() {
 
             --color-stack-h6: rgb(200, 200, 204);
             --color-stack-headline: rgb(99, 99, 102);
-            --color-stack-subline: rgba(142, 142, 147);
+            --color-stack-subline: rgb(121, 121, 121);
 
             --color-accents-3: rgb(118, 118, 118);
           }