/* themes.css — one block per theme. Slate is :root (default). */

:root {
    --font-display: Cinzel, Georgia, serif;
    --font-body: Manrope, system-ui, sans-serif;
    --bg-page: #12141a;
    --bg-page-image: none;
    --bg-header: #171a22;
    --bg-panel: #1b1e27;
    --bg-panel-image: none;
    --bg-inset: #222633;
    --bg-user-msg: #2a3040;
    --bg-input: #1b1e27;
    --bg-row-active: #2a2330;
    --ink: #e6e8ee;
    --ink-muted: #99a0b0;
    --ink-title: #f0e6d2;
    --on-accent: #ffffff;
    --accent: #d94f4f;
    --gold: #d9a746;
    --accent-icon: #d9a746;
    --hp-fill: #d94f4f;
    --hp-track: #2a2f3c;
    --border-color: #242938;
    --border-strong: 1px solid #2a2f3c;
    --border-panel: 1px solid #2a2f3c;
    --border-inset: 1px solid #2f3545;
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-panel: none;
    --scrim: rgba(0, 0, 0, 0.5);
}

[data-theme="parchment"],
[data-theme="weathered"] {
    --font-display: Cinzel, Georgia, serif;
    --font-body: Alegreya, Georgia, serif;
    --bg-page: #e7dab8;
    --bg-page-image: radial-gradient(ellipse at 50% 30%,
        rgba(255, 250, 235, 0.55), rgba(160, 130, 70, 0.16));
    --bg-header: rgba(244, 236, 214, 0.7);
    --bg-panel: #f4ecd6;
    --bg-panel-image: none;
    --bg-inset: #ecdfc0;
    --bg-user-msg: #e3d3ab;
    --bg-input: #f9f3e2;
    --bg-row-active: #ecdfc0;
    --ink: #362a18;
    --ink-muted: #7a6644;
    --ink-title: #362a18;
    --on-accent: #f4ecd6;
    --accent: #8c2f24;
    --gold: #9c7c3c;
    --accent-icon: #8c2f24;
    --hp-fill: #8c2f24;
    --hp-track: #d8c9a3;
    --border-color: #ddcda4;
    --border-strong: 3px double #a4884e;
    --border-panel: 4px double #a4884e;
    --border-inset: 1px solid #c3ab77;
    --radius: 4px;
    --radius-sm: 3px;
    --shadow-panel: 0 1px 4px rgba(74, 58, 28, 0.18);
    --scrim: rgba(60, 42, 12, 0.45);
}

/* Parchment family flourish: GM narration drop caps. The .dropcap class is
   set by chat.js only when the message starts with a letter — a leading
   digit (e.g. "19 slams past AC 13") renders as a giant numeral otherwise. */
[data-theme="parchment"] .gm-message.dropcap::first-letter,
[data-theme="weathered"] .gm-message.dropcap::first-letter {
    font-family: var(--font-display);
    font-size: 2.6em;
    line-height: 0.85;
    float: left;
    padding: 3px 7px 0 0;
    color: var(--accent);
    font-weight: 600;
}

/* -- Weathered: Parchment plus aging. Each effect below is independent —
   drop any one without touching the others. -- */
[data-theme="weathered"] {
    --bg-page: #dcc99b;
    --bg-page-image:
        radial-gradient(ellipse at 8% 92%, rgba(92, 60, 18, 0.22),
            rgba(92, 60, 18, 0.07) 18%, transparent 30%),
        radial-gradient(ellipse at 94% 2%, rgba(80, 50, 12, 0.26),
            rgba(80, 50, 12, 0.08) 14%, transparent 26%),
        radial-gradient(ellipse at 45% 25%, #ecdfbc, #dcc99b 70%, #c9b078 100%);
    --bg-panel: #f1e6cb;
    --bg-panel-image:
        radial-gradient(ellipse at 20% 15%, rgba(255, 250, 232, 0.5), transparent 60%),
        radial-gradient(ellipse at 85% 90%, rgba(140, 105, 45, 0.14), transparent 55%);
    --border-panel: 1px solid rgba(122, 95, 45, 0.55);
    --shadow-panel: inset 0 0 22px rgba(110, 80, 30, 0.22),
        0 2px 6px rgba(60, 42, 12, 0.25);
}

/* Effect: paper grain (SVG turbulence noise, no asset files). */
[data-theme="weathered"] .shell::after,
[data-theme="weathered"] .login::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.55" numOctaves="2" seed="7"/><feColorMatrix type="matrix" values="0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.17 0 0 0 0.10 0"/></filter><rect width="240" height="240" filter="url(%23g)"/></svg>');
}

/* Effect: aged-edge vignette. */
[data-theme="weathered"] .shell::before,
[data-theme="weathered"] .login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 39;
    pointer-events: none;
    box-shadow: inset 0 0 130px 26px rgba(78, 50, 10, 0.34);
}

/* Effect: deckled/torn panel edges. */
[data-theme="weathered"] .pane-left,
[data-theme="weathered"] .pane-center,
[data-theme="weathered"] .card {
    clip-path: polygon(
        0% 5px, 3% 2px, 7% 6px, 12% 1px, 18% 5px, 25% 2px, 33% 6px, 41% 3px,
        50% 6px, 58% 2px, 66% 5px, 74% 1px, 82% 5px, 90% 2px, 96% 6px, 100% 3px,
        calc(100% - 2px) 10%, 100% 18%, calc(100% - 5px) 28%,
        calc(100% - 1px) 40%, calc(100% - 5px) 52%, calc(100% - 2px) 63%,
        calc(100% - 6px) 74%, calc(100% - 1px) 85%, calc(100% - 4px) 94%,
        97% calc(100% - 2px), 90% 100%, 82% calc(100% - 5px),
        73% calc(100% - 1px), 64% calc(100% - 5px), 55% calc(100% - 2px),
        46% calc(100% - 6px), 37% calc(100% - 2px), 28% calc(100% - 5px),
        19% calc(100% - 1px), 11% calc(100% - 5px), 4% calc(100% - 2px),
        1px 95%, 5px 86%, 0px 76%, 4px 65%, 1px 54%, 6px 44%, 2px 33%,
        5px 22%, 1px 12%
    );
}