/* Cri-One diverse dull-tones palette — site-wide accent system.
   Loads alongside store-arial-only / store-match / crione_x on every page.
   Muted, earthy, sophisticated — attention-getting without being loud. */

:root {
    /* Existing anchors */
    --cri-ink:        #0a1e40;   /* deep navy */
    --cri-paper:      #ffffff;
    --cri-line:       #e5e5e5;
    --cri-muted-fg:   #666666;

    /* Dull-tone accent family (attention-getting muted) */
    --cri-sage:       #7a8c6f;   /* dusty green — music */
    --cri-sage-bg:    #eef1eb;
    --cri-terra:      #b4592e;   /* terracotta — auctions */
    --cri-terra-bg:   #f7e9e0;
    --cri-mustard:    #b8933a;   /* muted yellow — products */
    --cri-mustard-bg: #f6efd6;
    --cri-dusty:      #b48884;   /* dusty rose — patents */
    --cri-dusty-bg:   #f5e8e6;
    --cri-plum:       #6b4a5f;   /* muted purple — art */
    --cri-plum-bg:    #ede4e8;
    --cri-slate:      #5a6b7a;   /* blue-gray — articles/blog */
    --cri-slate-bg:   #e8ecf0;
    --cri-olive:      #7a7248;   /* yellow-green — announcements */
    --cri-olive-bg:   #efece0;
    --cri-taupe:      #8a7967;   /* warm gray — bookmarks */
    --cri-taupe-bg:   #ede8e0;
}

/* ── Auto-cycled heading colors (h2 through h4) ─────────────────
   Every non-anchor page gets a soft rainbow of headings so the
   content feels varied without touching individual pages. Skipped
   inside inputs, modals, and Elgg river item titles. */
main h2:nth-of-type(6n+1), article h2:nth-of-type(6n+1), section h2:nth-of-type(6n+1) { color: var(--cri-terra) !important; }
main h2:nth-of-type(6n+2), article h2:nth-of-type(6n+2), section h2:nth-of-type(6n+2) { color: var(--cri-slate) !important; }
main h2:nth-of-type(6n+3), article h2:nth-of-type(6n+3), section h2:nth-of-type(6n+3) { color: var(--cri-plum)  !important; }
main h2:nth-of-type(6n+4), article h2:nth-of-type(6n+4), section h2:nth-of-type(6n+4) { color: var(--cri-olive) !important; }
main h2:nth-of-type(6n+5), article h2:nth-of-type(6n+5), section h2:nth-of-type(6n+5) { color: var(--cri-sage)  !important; }
main h2:nth-of-type(6n),   article h2:nth-of-type(6n),   section h2:nth-of-type(6n)   { color: var(--cri-mustard) !important; }

/* ── Badges (usable in content — auto-tinted borders + labels) ── */
.cri-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.6;
    border: 1px solid transparent;
}
.cri-badge-sage    { color: var(--cri-sage);    background: var(--cri-sage-bg);    border-color: var(--cri-sage); }
.cri-badge-terra   { color: var(--cri-terra);   background: var(--cri-terra-bg);   border-color: var(--cri-terra); }
.cri-badge-mustard { color: var(--cri-mustard); background: var(--cri-mustard-bg); border-color: var(--cri-mustard); }
.cri-badge-dusty   { color: var(--cri-dusty);   background: var(--cri-dusty-bg);   border-color: var(--cri-dusty); }
.cri-badge-plum    { color: var(--cri-plum);    background: var(--cri-plum-bg);    border-color: var(--cri-plum); }
.cri-badge-slate   { color: var(--cri-slate);   background: var(--cri-slate-bg);   border-color: var(--cri-slate); }
.cri-badge-olive   { color: var(--cri-olive);   background: var(--cri-olive-bg);   border-color: var(--cri-olive); }
.cri-badge-taupe   { color: var(--cri-taupe);   background: var(--cri-taupe-bg);   border-color: var(--cri-taupe); }

/* ── Left-accent bars on blockquotes/notices ──────────────────── */
main blockquote,
article blockquote,
.elgg-message,
.notice-block {
    border-left: 4px solid var(--cri-sage);
    padding-left: 14px;
    color: var(--cri-ink);
}
main blockquote:nth-of-type(6n+1) { border-left-color: var(--cri-terra); }
main blockquote:nth-of-type(6n+2) { border-left-color: var(--cri-slate); }
main blockquote:nth-of-type(6n+3) { border-left-color: var(--cri-plum); }
main blockquote:nth-of-type(6n+4) { border-left-color: var(--cri-olive); }
main blockquote:nth-of-type(6n+5) { border-left-color: var(--cri-dusty); }

/* ── /channel/ feed tinting by cri_source metadata ──────────────
   Elgg river items get a subtle left border matched to their
   source type. Only fires on Elgg pages that have .elgg-river-item. */
.elgg-river-item {
    border-left: 4px solid transparent;
    padding-left: 12px;
    transition: border-color .15s ease;
}
/* Music: hint by presence of youtube embed OR "youtube" in tags */
.elgg-river-item:has(iframe[src*="youtube"]) { border-left-color: var(--cri-sage); }
/* Auction */
.elgg-river-item:has(a[href*="/auction/"])   { border-left-color: var(--cri-terra); }
/* Store */
.elgg-river-item:has(a[href*="/store/"])     { border-left-color: var(--cri-mustard); }
/* Bookmarks */
.elgg-river-item.elgg-river-item-object-bookmarks { border-left-color: var(--cri-taupe); }
/* Discussion topics */
.elgg-river-item.elgg-river-item-object-discussion { border-left-color: var(--cri-plum); }

/* ── Pill CTAs get subtle color rotation ──────────────────────── */
.cri-pill,
button.action-primary + .cri-note,
.cri-cta {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 24px;
    font-weight: 700;
    background: var(--cri-ink);
    color: var(--cri-paper) !important;
    text-decoration: none !important;
    transition: background .1s;
}
.cri-pill.sage    { background: var(--cri-sage);    }
.cri-pill.terra   { background: var(--cri-terra);   }
.cri-pill.mustard { background: var(--cri-mustard); }
.cri-pill.dusty   { background: var(--cri-dusty);   }
.cri-pill.plum    { background: var(--cri-plum);    }
.cri-pill.slate   { background: var(--cri-slate);   }
.cri-pill.olive   { background: var(--cri-olive);   }
.cri-pill.taupe   { background: var(--cri-taupe);   }