/* Parchment texture for the light content panels.
 *
 * Mimics the aged-paper look of printed homebrew: a warm cream ground, uneven
 * blotching, browner edges, and a fine fibre grain. Those four things together
 * are what makes a scan read as paper rather than as a beige rectangle — the
 * blotching especially, since real paper never yellows evenly.
 *
 * Built entirely from gradients and one inline SVG, so it costs no image
 * request, stays sharp at any zoom, and tiles at any panel size. The grain is
 * a 180px SVG tile repeated rather than one big filter, which keeps it cheap.
 *
 * DAY MODE ONLY. Every rule is scoped to :not([data-theme="night"]) — a warm
 * parchment ground would wreck night mode, which wants to stay dark. Night
 * gets the grain alone, at a much lower strength, so the two modes feel like
 * the same site without night pretending to be paper.
 *
 * Loaded last so it can layer over the panel colours in stylesheet.css and
 * site-settings.css without editing them. Delete the <link> to remove it
 * entirely; nothing else references this file.
 */

:root {
    /* Warmer and darker than the old #fefeee: that was a near-white with a
       faint green cast, and parchment needs to sit on the amber side. */
    --parchment-base: #f7f0de;

    /* Two tints rather than one, so overlapping blotches vary in hue as well
       as in strength. Kept low-alpha — the effect should read as age, not as
       a stain. */
    --parchment-tint-a: rgba(193, 150, 88, 0.13);
    --parchment-tint-b: rgba(158, 118, 68, 0.09);

    /* Edges and corners darken on any real sheet: handling, light, and the
       scanner's own falloff. */
    --parchment-edge: rgba(133, 98, 52, 0.17);

}

/* ── the texture stack ──────────────────────────────────────────────
   Top to bottom: fine grain, coarse cloud, three blotches, edge vignette.
   Strengths were tuned by eye in the browser, not guessed — at the first
   values the grain was invisible and the cloud muddied the text.

   Note baseFrequency x tile size must land on a whole number or stitchTiles
   still shows a seam: 0.9 x 180 = 162, 0.01 x 400 = 4. */
:root:not([data-theme="night"]) .content,
:root:not([data-theme="night"]) .entry-content,
:root:not([data-theme="night"]) .widget,
:root:not([data-theme="night"]) .comment,
:root:not([data-theme="night"]) .settings-section {
    background-color: var(--parchment-base);
    background-image:
        /* fine fibre grain */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E"),
        /* coarse cloudiness — the layer that actually reads as "paper" rather
           than "beige with noise on it". Kept very low alpha: it darkens the
           whole panel, so anything stronger muddies the text. */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45  0 0 0 0 0.33  0 0 0 0 0.16  0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23c)'/%3E%3C/svg%3E"),
        /* blotching — deliberately irregular positions, because anything on a
           grid reads as a pattern rather than as ageing */
        radial-gradient(58% 44% at 13% 17%, var(--parchment-tint-a), transparent 70%),
        radial-gradient(48% 38% at 86% 26%, var(--parchment-tint-b), transparent 72%),
        radial-gradient(54% 46% at 27% 81%, var(--parchment-tint-b), transparent 70%),
        /* edge darkening */
        radial-gradient(135% 115% at 50% 45%, transparent 55%, var(--parchment-edge) 100%);
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 180px 180px, 400px 400px, cover, cover, cover, cover;
}

/* Buttons and inputs keep their own colours: a textured control looks broken
   rather than aged, and the roller's inputs need to stay obviously editable.
   Spelled out because .settings-section is an ancestor of both. */
:root:not([data-theme="night"]) .settings-section input,
:root:not([data-theme="night"]) .settings-section select,
:root:not([data-theme="night"]) .settings-section textarea,
:root:not([data-theme="night"]) .settings-section button {
    background-image: none;
}

/* ── night mode ─────────────────────────────────────────────────────
   Grain only. No warm ground, no blotching, no vignette — just enough
   surface to stop the panels reading as flat slabs. */
[data-theme="night"] .content,
[data-theme="night"] .entry-content,
[data-theme="night"] .widget,
[data-theme="night"] .comment,
[data-theme="night"] .settings-section {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.10'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}

/* Printing a character sheet should not spend ink on simulated dirt. */
@media print {
    .content,
    .entry-content,
    .widget,
    .comment,
    .settings-section {
        background-image: none !important;
        background-color: #fff !important;
    }
}