/* Theme tokens. Tailwind's color names (bg, ink, accent, …) point at these, so flipping the `dark` class on reskins the whole site. */ :root { --c-bg: #f6f1e7; /* warm paper */ --c-surface: #fbf7ef; /* card stock, slightly lighter than the page */ --c-surface-2: #efe8d9; /* sunk wells / table zebra */ --c-text: #211d18; /* ink */ --c-text-muted: #6f675a; --c-border: #ddd3c0; --c-accent: #9a3412; /* oxblood / burnt sienna — the spine colour */ --c-accent-2: #1f6f5c; /* bottle green — secondary accent */ --c-gold: #b8862f; /* rating stars */ } .dark { --c-bg: #15130f; /* night reading */ --c-surface: #1e1b15; --c-surface-2: #262219; --c-text: #ece5d7; --c-text-muted: #9b9280; --c-border: #312c22; --c-accent: #e6713f; /* glowing terracotta */ --c-accent-2: #5fb89b; --c-gold: #d6a94b; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--c-bg); color: var(--c-text); /* faint paper grain + a warm top-light wash for atmosphere */ background-image: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--c-accent) 7%, transparent), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-attachment: fixed; } /* Make Tailwind Typography (prose) follow the theme accent for links and honour the body color. dark:prose-invert handles the rest. */ .prose { --tw-prose-links: var(--c-accent); --tw-prose-invert-links: var(--c-accent); } .prose a { text-underline-offset: 2px; } .prose :where(h1, h2, h3) { font-family: "Fraunces", Georgia, serif; }