/* 1.12.0: themes for the friend pages (start page, dates, locked page). Default = SlamYourJam (app.css).
   html[data-theme=...] is set by theme.js from the shared cookie syj_theme (also read by Chronik). */

/* ---------- Light */
html[data-theme="light"] {
  color-scheme: light;
  --fg-rgb: 15 23 42; --bg-rgb: 226 232 240; --card-rgb: 255 255 255; --accent-rgb: 22 138 74;
  --bg: #eef2f6; --bg-glow: #dce8f4;
  --card: rgb(255 255 255 / 0.92); --card-solid: #ffffff; --inset: #f4f7fa;
  --line: rgb(15 23 42 / 0.10); --line-strong: rgb(15 23 42 / 0.18);
  --text: #111827; --text-2: #374151; --muted: #5b6675; --faint: #6b7684;
  --accent: #168a4a; --accent-hi: #0f6e3a; --accent-soft: rgb(22 138 74 / 0.10);
  --good-text: #13802a; --warn-text: #9a5b00; --bad-text: #c42a2f;
}
html[data-theme="light"] .card, html[data-theme="light"] .hero { box-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px -16px rgb(15 23 42 / 0.25); }
html[data-theme="light"] .btn.primary, html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .tag, html[data-theme="light"] .copy.done,
html[data-theme="light"] .lang button[aria-pressed="true"] { color: #fff; }
html[data-theme="light"] .addr { background: var(--inset); }
html[data-theme="light"] .brand svg rect { fill: #16202e; }
html[data-theme="light"] .state.online { color: var(--accent); }

/* ---------- Pathfinder: parchment cards on a dark leather table, red ink, Cinzel headings */
html[data-theme="pf2e"] {
  color-scheme: light;
  --fg-rgb: 94 40 10; --bg-rgb: 251 245 230; --card-rgb: 241 230 204; --accent-rgb: 94 0 0;
  --bg: #17110d; --bg-glow: #3a1810;
  --parch: #f1e6cc; --parch-2: #e7d7b4; --parch-edge: #cdb586; --gold: #d8c483; --gold-2: #b89a4e;
  --card: #f1e6cc; --card-solid: #f1e6cc; --inset: #fbf5e6;
  --line: rgb(94 40 10 / 0.18); --line-strong: rgb(94 40 10 / 0.32);
  --text: #2b1c12; --text-2: #4a3626; --muted: #7a6249; --faint: #8a7258;
  --accent: #5e0000; --accent-hi: #8a1c13; --accent-soft: rgb(94 0 0 / 0.08);
  --good-text: #2f6b1f; --warn-text: #8a5a00; --bad-text: #8a1c13;
  --display: 'Cinzel', Georgia, serif;
  --font: 'Spectral', Georgia, serif;
  --radius: 6px;
}
html[data-theme="pf2e"] body {
  background:
    radial-gradient(1400px 700px at 50% -15%, rgba(138, 28, 19, 0.28), transparent 60%) fixed,
    radial-gradient(800px 500px at 100% 100%, rgba(184, 154, 78, 0.10), transparent 60%) fixed,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.06 0 0 0 0 0.03 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--bg);
  font-size: 16px;
}
html[data-theme="pf2e"] .card, html[data-theme="pf2e"] .hero, html[data-theme="pf2e"] #drawer .dr {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.15 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--parch), var(--parch-2));
  border: 1px solid var(--parch-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 40px rgba(120, 80, 30, 0.18) inset, 0 14px 40px -18px rgba(0, 0, 0, 0.75);
  color: var(--text);
  border-radius: 6px;
}
html[data-theme="pf2e"] .hero { border: 2px solid var(--gold-2); outline: 1px solid var(--parch-edge); outline-offset: -7px; }
html[data-theme="pf2e"] .hero h1 { color: var(--accent); }
html[data-theme="pf2e"] .card .h2, html[data-theme="pf2e"] .chart-title, html[data-theme="pf2e"] .srv h3 { color: var(--accent); font-family: var(--display); }
html[data-theme="pf2e"] .card .h2 { border-bottom: 2px solid var(--accent); padding-bottom: 6px; }
html[data-theme="pf2e"] .kicker { color: var(--accent-hi); }
html[data-theme="pf2e"] .players b, html[data-theme="pf2e"] .tile .v, html[data-theme="pf2e"] .count b { font-family: var(--display); font-weight: 700; color: var(--accent); }
html[data-theme="pf2e"] .btn { border-color: var(--accent); color: var(--accent); border-radius: 4px; font-family: var(--display); font-weight: 600; letter-spacing: 0.3px; }
html[data-theme="pf2e"] .btn:hover { background: var(--accent-soft); color: var(--accent); }
html[data-theme="pf2e"] .btn.primary { background: linear-gradient(180deg, #7a0a05, #5e0000); color: #f6ecd4; border-color: #3d0000; box-shadow: 0 0 0 1px var(--gold-2) inset; }
html[data-theme="pf2e"] .btn.primary:hover { color: #fff6df; background: linear-gradient(180deg, #8a1c13, #5e0000); }
html[data-theme="pf2e"] .tag { background: var(--accent); color: #f6ecd4; border-radius: 3px; border: 1px solid var(--gold-2); }
html[data-theme="pf2e"] .copy { background: rgb(94 40 10 / 0.08); color: var(--text); }
html[data-theme="pf2e"] .copy.done { background: var(--accent); color: #f6ecd4; }
html[data-theme="pf2e"] .addr, html[data-theme="pf2e"] .mlink, html[data-theme="pf2e"] .count div { background: var(--inset); border-color: var(--parch-edge); }
html[data-theme="pf2e"] .state.online { color: #2f6b1f; background: rgba(47, 107, 31, 0.12); }
html[data-theme="pf2e"] .badge { box-shadow: 0 0 0 1px var(--parch-edge); }
html[data-theme="pf2e"] .find-more { background: transparent; border-color: rgba(216, 196, 131, 0.4); color: rgba(233, 220, 189, 0.7); }
html[data-theme="pf2e"] .find-more div { color: rgba(233, 220, 189, 0.85) !important; }

/* things that sit directly on the dark table, not on parchment */
html[data-theme="pf2e"] .top, html[data-theme="pf2e"] .brand, html[data-theme="pf2e"] .brand:hover { color: var(--parch); }
html[data-theme="pf2e"] .brand-name { color: #f6ecd4; text-shadow: 0 1px 0 #000; }
html[data-theme="pf2e"] .brand-sub { color: var(--gold-2); }
html[data-theme="pf2e"] .navbar, html[data-theme="pf2e"] .chip { background: rgba(23, 17, 13, 0.6); border: 1px solid rgba(216, 196, 131, 0.35); color: #e9dcbd; }
html[data-theme="pf2e"] .navbar a { color: #e9dcbd; }
html[data-theme="pf2e"] .navbar a:hover { color: #fff6df; background: rgba(216, 196, 131, 0.12); }
html[data-theme="pf2e"] .chip.status { color: var(--gold); border-color: rgba(216, 196, 131, 0.5); }
html[data-theme="pf2e"] .chip.gear:hover { color: var(--gold); }
html[data-theme="pf2e"] .col > .section:not(.card) > .h2, html[data-theme="pf2e"] .col > .section:not(.card) > .section-head .h2 { color: #f6ecd4; font-family: var(--display); }
html[data-theme="pf2e"] .col > .section:not(.card) > .section-head .note, html[data-theme="pf2e"] .pill-note { color: var(--gold-2); border-color: rgba(216, 196, 131, 0.35); }
html[data-theme="pf2e"] details.more > summary { background: rgba(23, 17, 13, 0.6); border-color: rgba(216, 196, 131, 0.35); color: #e9dcbd; }
html[data-theme="pf2e"] details.more > summary::before { color: var(--gold-2); }
html[data-theme="pf2e"] .foot { color: rgba(233, 220, 189, 0.55); border-top-color: rgba(216, 196, 131, 0.2); }
html[data-theme="pf2e"] #drawer .dr-head .h2 { color: var(--accent); }
html[data-theme="pf2e"] .theme-opt { background: var(--inset); border-color: var(--parch-edge); }
html[data-theme="pf2e"] .lang { background: var(--inset); border-color: var(--parch-edge); }
html[data-theme="pf2e"] .lang button[aria-pressed="true"] { background: var(--accent); color: #f6ecd4; }