Fix text-paper (and all utility colours) being overridden on <a> tags

Global resets (a, button, body, img) were outside any @layer, so
they beat Tailwind's @layer utilities in the cascade. Wrapping them
in @layer base restores the expected order: base < utilities.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-18 19:35:03 +02:00
parent e488d45fa3
commit fd1b0f2d46
+18 -16
View File
@@ -39,25 +39,27 @@
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-feature-settings: "ss01", "cv11";
font-size: 15px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
body {
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-feature-settings: "ss01", "cv11";
font-size: 15px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
/* ── paper grain overlay ── */
body::before {
content: "";