/* src/frontend/static/css/black.css */

/* --- Dark / default --- */

html,body{
    height:100%;
    margin:0;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
body{
  background:var(--bg);
  color:var(--text);
  padding:24px;
}

/* examples of replacing hard-coded colors */
.brand-title { color: var(--text); }
.header { background: transparent; }
.tab { color: var(--muted); }
.tab.active { background: var(--chip-bg); color: var(--text); }
.search { background:var(--chips-bg); border:2px solid rgba(255,255,255,0.04); } /* consider replacing with var() if needed */

/* cards */
.card{
  background: var(--card-bg);
  color: var(--text);
  border-radius:12px;
  overflow:hidden;
  transition: background 180ms, transform 160ms;
  border:1px solid rgba(255,255,255,0.03);
  padding:0;
  display:block;
  position:relative;
}
.card:hover{
  background: var(--card-hover-bg);
  color: var(--text);
  transform: translateY(-6px);
  border: var(--accent) 2px solid;
}

/* modal overlay using variable */
#video-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--overlay);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

/* modal background */
#video-modal { background: var(--panel); color: var(--text); }