fix(core): change doc icon layout to avoid incorrect color caused by the transform (#13719)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated document title styling for improved readability (larger font,
increased line height, heavier weight).
* Refined spacing so titles align correctly when a document icon is
present (no extra top padding).
* Improved emoji rendering by using a consistent font and removing an
unnecessary visual artifact.
* Simplified title container behavior to ensure stable, predictable
alignment without placeholder-based shifts.

* **Chores**
* Minor UI cleanup and consistency adjustments for the icon/title area.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/fragments/doc-title/src/doc-title.ts

@@ -19,16 +19,16 @@ const DOC_BLOCK_CHILD_PADDING = 24;
 
 export class DocTitle extends WithDisposable(ShadowlessElement) {
   static override styles = css`
+    .doc-title-container {
+      font-size: 40px;
+      line-height: 50px;
+      font-weight: 700;
+    }
     .doc-icon-container,
     .doc-title-container {
       box-sizing: border-box;
       font-family: var(--affine-font-family);
-      font-size: var(--affine-font-base);
-      line-height: var(--affine-line-height);
       color: var(--affine-text-primary-color);
-      font-size: 40px;
-      line-height: 50px;
-      font-weight: 700;
       outline: none;
       resize: none;
       border: 0;
@@ -47,6 +47,10 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
         ${DOC_BLOCK_CHILD_PADDING}px
       );
     }
+    .doc-icon-container + * .doc-title-container {
+      /* when doc icon exists, remove the top padding */
+      padding-top: 0;
+    }
 
     /* Extra small devices (phones, 640px and down) */
     @container viewport (width <= 640px) {