/* ==========================================================================
   RED STUDIO – audio/design.css
   ███ REDWEB PLUGIN SUITE — DESIGN DNA ███
   Zentrale Design-Tokens + Primitives für ALLE Plugins. Ein einziges
   Ökosystem: gamifiziertes Studio-/Sci-Fi-HUD trifft High-End-Audio.
   Primär #980A0A · Sekundär #AB27E8. Jedes Plugin teilt sich diese Sprache.
   Präfix der Tokens: --rw-  · Komponenten: .rw-*
   ========================================================================== */

:root {
    /* ---- Marke ---- */
    --rw-primary:        #980A0A;
    --rw-primary-hi:     #d11414;
    --rw-secondary:      #AB27E8;
    --rw-secondary-hi:   #c45cf4;

    /* ---- Flächen / Tiefe ---- */
    --rw-bg:        #090b10;
    --rw-bg-2:      #0d1017;
    --rw-glass:     rgba(20,24,32,.74);
    --rw-glass-2:   rgba(32,38,50,.55);
    --rw-panel:     #121620;
    --rw-panel-2:   #171c28;
    --rw-stroke:    rgba(255,255,255,.07);
    --rw-stroke-2:  rgba(255,255,255,.14);
    --rw-inset:     #05070b;

    /* ---- Text ---- */
    --rw-text:  #e9ecf3;
    --rw-muted: #8b93a3;
    --rw-dim:   #5d6473;

    /* ---- Leuchten / Glows ---- */
    --rw-glow-p:  0 0 16px rgba(152,10,10,.55);
    --rw-glow-s:  0 0 16px rgba(171,39,232,.50);
    --rw-line-p:  rgba(152,10,10,.55);
    --rw-line-s:  rgba(171,39,232,.55);

    /* ---- Form / Typo / Motion ---- */
    --rw-r:    14px;
    --rw-r-sm: 9px;
    --rw-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --rw-mono: "SF Mono",ui-monospace,Menlo,Consolas,monospace;
    --rw-ease: cubic-bezier(.22,.61,.36,1);
    --rw-dur:  .18s;
}

/* ---- Bewegungen (dezent, hochwertig, nie nervös) ---- */
@keyframes rw-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes rw-sheen { 0%{background-position:-180% 0} 100%{background-position:280% 0} }
@keyframes rw-rise  { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ===================== PRIMITIVES ===================== */

/* Glas-Panel mit Tiefe + feinem oberen Lichtsaum */
.rw-panel {
    position:relative;
    background:linear-gradient(180deg,var(--rw-glass-2),var(--rw-glass));
    border:1px solid var(--rw-stroke);
    border-radius:var(--rw-r);
    box-shadow:0 18px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
}
.rw-panel::before {
    content:""; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    pointer-events:none;
}

/* HUD-Raster als subtiler Hintergrund (Sci-Fi-Anmutung) */
.rw-hud {
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:22px 22px;
}

/* Kategorie-/Status-Badge */
.rw-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:9px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
    padding:3px 8px; border-radius:20px; color:var(--rw-secondary-hi);
    border:1px solid var(--rw-line-s); background:rgba(171,39,232,.08);
}

/* Dünner Trenner */
.rw-div { height:1px; background:linear-gradient(90deg,transparent,var(--rw-stroke-2),transparent); }

/* Leucht-Akzentlinie (primär/sekundär) */
.rw-accent-p { box-shadow:var(--rw-glow-p); }
.rw-accent-s { box-shadow:var(--rw-glow-s); }