/* Per-section accent colours. app.js sets body[data-tab] = home | catalog | shelf | community
   (sub-pages inherit their section; #/p/ keeps the section you came from; #/me = home).
   Only accent tokens change: highlights, buttons, chips, links, tab bar, page-title accents.
   Backgrounds, cards and status colours (--ok/--gold/--danger) are never touched.
   Contrast (WCAG AA, computed): every --btn takes white text >= 4.5:1; every --accent as text
   on --surface and --bg >= 4.5:1 in both themes. Home = brand blue (app.css defaults). */

body { --accent-glow: rgba(37, 99, 235, .55); }

/* ---------- light ---------- */
body[data-tab="catalog"] {   /* green */
  --accent: #15803D; --accent-soft: rgba(21, 128, 61, .10);
  --brand-grad: linear-gradient(135deg, #166534 0%, #15803D 100%);
  --btn: #15803D; --btn-ink: #FFFFFF; --accent-glow: rgba(21, 128, 61, .55);
}
body[data-tab="shelf"] {     /* red — crimson, distinct from the brick-orange --danger */
  --accent: #C8102E; --accent-soft: rgba(200, 16, 46, .09);
  --brand-grad: linear-gradient(135deg, #A50E26 0%, #D7263D 100%);
  --btn: #C8102E; --btn-ink: #FFFFFF; --accent-glow: rgba(200, 16, 46, .5);
}
body[data-tab="community"] { /* purple */
  --accent: #7C3AED; --accent-soft: rgba(124, 58, 237, .10);
  --brand-grad: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
  --btn: #7C3AED; --btn-ink: #FFFFFF; --accent-glow: rgba(124, 58, 237, .55);
}

/* ---------- dark (OS dark unless forced light, or forced dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-tab="catalog"] {
    --accent: #4ADE80; --accent-soft: rgba(74, 222, 128, .14);
    --brand-grad: linear-gradient(135deg, #14532D 0%, #15803D 100%); --btn: #15803D; --btn-ink: #FFFFFF;
  }
  :root:not([data-theme="light"]) body[data-tab="shelf"] {
    --accent: #FF7A88; --accent-soft: rgba(255, 122, 136, .15);
    --brand-grad: linear-gradient(135deg, #8F0C22 0%, #C8102E 100%); --btn: #C8102E; --btn-ink: #FFFFFF;
  }
  :root:not([data-theme="light"]) body[data-tab="community"] {
    --accent: #B69CFF; --accent-soft: rgba(182, 156, 255, .15);
    --brand-grad: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%); --btn: #7C3AED; --btn-ink: #FFFFFF;
  }
}
:root[data-theme="dark"] body[data-tab="catalog"] {
  --accent: #4ADE80; --accent-soft: rgba(74, 222, 128, .14);
  --brand-grad: linear-gradient(135deg, #14532D 0%, #15803D 100%); --btn: #15803D; --btn-ink: #FFFFFF;
}
:root[data-theme="dark"] body[data-tab="shelf"] {
  --accent: #FF7A88; --accent-soft: rgba(255, 122, 136, .15);
  --brand-grad: linear-gradient(135deg, #8F0C22 0%, #C8102E 100%); --btn: #C8102E; --btn-ink: #FFFFFF;
}
:root[data-theme="dark"] body[data-tab="community"] {
  --accent: #B69CFF; --accent-soft: rgba(182, 156, 255, .15);
  --brand-grad: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%); --btn: #7C3AED; --btn-ink: #FFFFFF;
}

/* Glows that app.css hard-codes in brand blue follow the section colour. */
.scan-btn { box-shadow: 0 4px 12px -4px var(--accent-glow); }
.gallery-3d { box-shadow: 0 6px 14px -6px var(--accent-glow); }
.shelf-hero { box-shadow: 0 10px 30px -18px var(--accent-glow); }

/* Page titles: a short accent bar under the big tab-page headings (header accent, not a tint). */
.topbar.big h1::after, .hero h1::after {
  content: ""; display: block; inline-size: 28px; block-size: 3px; margin-block-start: 6px;
  border-radius: 2px; background: var(--accent);
}
/* Sub-page titles (Notifications, Post, Swap, Profile…): accent tick before the title. */
.topbar > h2.grow { display: flex; align-items: center; gap: 8px; }
.topbar > h2.grow::before {
  content: ""; flex: none; inline-size: 3px; block-size: 1em; border-radius: 2px; background: var(--accent);
}