/* OOI shared design tokens — the canonical aesthetic for ALL participant
   experiences (CR LDD-Alpha8-003; retokened under docs/site-redesign-plan.md
   Phases 3–4 to the one visual system).

   Single source of truth for the participant surfaces' DARK INSTRUMENT ground
   (Void · Umbra · Penumbra — the same palette as assets/theme.css dark and
   /shared/ooi-tokens.css). Every client page (capture, grid, chat, OaOooa,
   the experiment pages) links this so the whole product reads as one OOI
   surface — change a colour here and it changes everywhere.

   THE COLOUR LAW: #CC5500 is a fill; --ooi-accent is the TEXT-safe solar tone
   (#F0873A on this ground) and doubles as the action fill with dark on-accent
   text. The faces are self-hosted alongside at /shared/fonts/ (OFL).

   Served by the dashboard at /shared/ooi.css. */

@font-face {
    font-family: "Mona Sans";
    src: url("fonts/MonaSansVF.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Mona Sans";
    src: url("fonts/MonaSansVF-Italic.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ooi-bg:        #17100D;   /* Void — primary background     */
    --ooi-surface:   #241713;   /* Umbra — panels / cards        */
    --ooi-surface-2: #2E1E18;   /* Penumbra — raised surface     */
    --ooi-border:    rgba(195, 175, 163, 0.30);
    --ooi-border-2:  rgba(195, 175, 163, 0.15);
    --ooi-text:      #F5EDE6;   /* Light — primary body text     */
    --ooi-text-2:    #C3AFA3;   /* Dust — secondary body text    */
    --ooi-muted:     #9A8478;   /* Ash — labels / captions       */
    --ooi-accent:    #F0873A;   /* Solar 400 — accent TEXT + action fill */
    --ooi-accent-2:  #CC5500;   /* Solar Orange — deep fill ONLY (never text) */
    --ooi-gold:      #DAA520;   /* Solar Glow — highlight / values */
    --ooi-success:   #22c55e;
    --ooi-warn:      #f59e0b;
    --ooi-danger:    #f87171;
    --ooi-font:      "JetBrains Mono", "Cascadia Mono", Consolas,
                     "Courier New", monospace;
    --ooi-font-sans: "Mona Sans", "Segoe UI", -apple-system,
                     "Helvetica Neue", Arial, sans-serif;
}

/* ── Base resets shared across experiences ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.ooi-body {
    margin: 0;
    background: var(--ooi-bg);
    color: var(--ooi-text);
    font-family: var(--ooi-font);
}

/* Primary action button (shutter, send, retry, start…) */
.ooi-btn {
    background: var(--ooi-accent);
    color: #1a1410;
    border: none;
    border-radius: 8px;
    font-family: var(--ooi-font);
    font-weight: 700;
    cursor: pointer;
}
.ooi-btn:hover { background: var(--ooi-accent-2); color: #1a1410; }
.ooi-btn:disabled { opacity: 0.4; cursor: default; }

/* Themed scrollbar — consistent with the dashboard chrome */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ooi-border); border-radius: 4px; }

/* ── Contrib experiments — the visible register (docs/contrib-experiments-design.md;
   the provenance chrome formalised per site-redesign-plan.md §4.6, option 1b) ──
   MAGENTA IS CHROME, NEVER PALETTE: it says who stands behind the page and is
   never a data colour — charts and run-buttons stay solar on contrib pages so
   colour never means two things. The ramp: #A3197A on light · #D6248C fill ·
   #F26FB2 text on dark · #2A0F20 the contrib well. The six signals: the canon
   ribbon, the edge rule, the CONTRIB· title prefix, top attribution, the
   contrib_dataset namespace, and the canon clause in the footer. */
:root {
    --ooi-contrib-fill:    #D6248C;
    --ooi-contrib-text:    #F26FB2;   /* on this dark ground */
    --ooi-contrib-surface: #2A0F20;
}
/* 01 · the canon ribbon — full-width, sticky, above the masthead */
.contrib-ribbon {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: var(--ooi-contrib-fill);
    color: #FFF3FA;
    font-family: var(--ooi-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 10px;
}
/* 02 · the edge rule — 3px magenta down the whole document (core pages: none) */
.contrib-edge { border-left: 3px solid var(--ooi-contrib-fill); }
/* 04 · the attribution + the banner (existing register, retokened) */
.contrib-banner {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--ooi-contrib-fill);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--ooi-contrib-surface);
    color: var(--ooi-text);
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.5;
}
.contrib-banner .k {
    color: var(--ooi-contrib-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
}
.contrib-banner .who { color: var(--ooi-contrib-text); font-weight: 700; }
.contrib-banner .note { color: var(--ooi-muted); }
.contrib-chip {
    display: inline-block;
    border: 1px solid var(--ooi-contrib-fill);
    color: var(--ooi-contrib-text);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    vertical-align: middle;
    white-space: nowrap;
}