/* Theme "classic". THIS FILE IS THE SOURCE — edit it directly.
   Tia's docs/THEME-TABLE workbook + tools/theme-table.js generated the
   original of this file; neither is in the repo and the build does not run
   them, because the build must not depend on a binary file. Colours may be
   written HERE and nowhere else: lintColours() in build.js fails the build
   on a colour literal in any other stylesheet. */
:root {
    --theme-primary: #cc0000;   /* Lines, borders, links, log text (accent) */
    --theme-primary-light: #ee0000;   /* Big celtic titles + nav fill */
    --theme-primary-dark: #aa0000;   /* Button pressed */
    --theme-primary-hover: #dd0000;   /* Button hover */
    --theme-primary-bg: #bb0000;   /* Roll / action buttons */
    --bg-primary: #fefeee;   /* Glass pane colour (content, blog, directory) */
    --bg-secondary: #ffffff;   /* Cards, inputs on panes */
    --bg-tertiary: rgba(255, 255, 255, 0.85);   /* Menus, dialogs */
    --bg-input: #ffffff;   /* Dice table pane, inputs */
    --bg-button: #efefde;   /* Roll log pane, plain buttons */
    --bg-hover: #eeeeee;   /* Hover on inputs/labels */
    --bg-body: #000000;   /* Page ground behind the artwork */
    --bg-footer: #222222;   /* Header/footer band, shadow behind header text */
    --text-primary: #000000;   /* Body text */
    --text-secondary: #666666;   /* Meta, captions */
    --text-footer: #ffffff;   /* Text directly on the artwork (subtitle, nav, footer) */
    --text-on-accent: #ffffff;   /* Text on accent buttons */
    --title-stroke: #ffffff;   /* Outline on celtic titles */
    --text-stroke: #000000;   /* Outline behind log totals / entry titles */
    --text-halo: #ffffff;   /* Glow behind body text on bare artwork (directory) */
    --border-light: #cccccc;   /* Hairlines */
    --ok: #2e7d32;   /* Success */
    --warn: #8a6d00;   /* Warning text */
    --warn-bg: #f7e9b0;   /* Warning background */
    --log-beacon: #6f5a1c;   /* Uncurse-my-dice link */
    --log-beacon-hover: #55461a;   /* …hover */
    --bg-art: url("/assets/DnD_Starter_Art.webp");   /* Artwork */
    --bg-art-large: url("/assets/DnD_Starter_Art-large.webp");   /* Artwork ≥1600px */
    --bg-art-mobile: url("/assets/illo4.webp");   /* Artwork on phones */
    --glass-tint: 74%;   /* How much pane colour remains */
    --glass-blur: 12px;   /* Blur behind panes */
    --panel-texture: none;   /* Tiled texture over panes */
    --card-border: #cccccc;   /* Card outline (blog tiles, directory & book cards) */
    --card-well: rgba(0,0,0,.35);   /* Card image well (inner, behind the picture) */
}

/* Classic's panels are aged paper, painted over the glass. */
: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. */
.content,
.entry-content,
.widget,
.comment,
.settings-section {
    background-color: color-mix(in srgb, var(--parchment-base) var(--glass-tint), transparent); /* paper, but glass: the blur shows through */
    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. */
.settings-section input,
.settings-section select,
.settings-section textarea,
.settings-section button {
    background-image: none;
}


@media print {
    .content, .entry-content, .widget, .comment, .settings-section {
        background-image: none !important;
        background-color: #fff !important;
    }
}